CSS3 动画创建手风琴面板

Question

我有这个 jsfiddle，我正在尝试用 CSS3 和动画创建一个手风琴。

设置相当简单：一个复选框（状态为选中或未选中）控制内容 div 是否应折叠。复选框被标签隐藏和控制。

这个原理很好用，但是动画却不行。我想要的只是让 div 滑动打开和关闭。

HTML

<div class="accordeon">
    <input type="checkbox" name="accordeon-title" class="accordeon-checkbox" id="accordeon-title" /><label for="accordeon-title" class="accordeon-title-label">Accordeon titel</label>
    <div class="accordeon-content">
        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet.
    </div>
</div>

CSS3

 /*Init*/
    .accordeon-checkbox {display: none;}
    .accordeon-title-label {cursor: pointer; background: #c4c4c4; display: block;}
    .accordeon-content {height: 0; overflow:hidden; line-height: 0;}

    /*Click functionaliteit*/
    .accordeon:checked + label {background: #e4e4e4;}
    .accordeon-checkbox:checked ~ .accordeon-content {  
        -webkit-animation: slide-up 5s; /* Safari 4+ */
        -moz-animation:    slide-up 5s; /* Fx 5+ */
        -o-animation:      slide-up 5s; /* Opera 12+ */
        animation:         slide-up 5s; /* IE 10+ */

        -webkit-animation-timing-function:ease;
        -moz-animation-timing-function:ease;
        -o-animation-timing-function:ease;
        animation-timing-function:ease;

        line-height: inherit; overflow: visible; height: 100%;
    }   

    /*Animation functionality*/
    @-webkit-keyframes slide-up {
        0%   { height: 0; }
        100% { height: 100%; }
    }
    @-moz-keyframes slide-up {
        0%   { height: 0; }
        100% { height: 100%; }
    }
    @-o-keyframes slide-up {
        0%   { height: 0; }
        100% { height: 100%; }
    }
    @keyframes slide-up {
        0%   { height: 0; }
        100% { height: 100%; }
    }

Answer 1

首先，请注意一旦选中复选框，您将重新设置height、line-height 和overflow 属性。因此在这种情况下动画没有任何效果。

另外，height: 100% 不会影响元素，因为它的父元素没有明确的 height。因此，您需要为 height 属性使用固定值。

另外，CSS 动画无法通过animate the overflow 属性和line-height 正确（特别是inherit 值）。

为了在结束关键帧处停止动画，您应该使用带有forwards 值的animation-fill-mode 属性。

这里是速记版本：

.accordeon-checkbox:checked ~ .accordeon-content {
    -webkit-animation: slide-up 1s ease forwards;
    /* Safari 4+ */
    -moz-animation: slide-up 1s ease forwards;
    /* Fx 5+ */
    -o-animation: slide-up 1s ease forwards;
    /* Opera 12+ */
    animation: slide-up 1s ease forwards;
    /* IE 10+ */
}

Demo.

关闭面板的问题

但是使用动画存在问题。由于动画仅在复选框被选中时应用于元素，一旦您通过第二次单击取消选中复选框，面板将立即关闭立即 没有 任何动画。

因此，最好使用transitions 来达到预期的效果。

给你：

.accordeon-content {
    height: 0;
    overflow:hidden;
    background-color: gold;

    /* other vendor-prefixes here... */
    transition: height 1s ease;
}

.accordeon-checkbox:checked ~ .accordeon-content {
    height: 400px;
}

Working Demo.