CSS3动画创建手风琴面板

我有一个，我试图用CSS3和动画制作一个手风琴

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

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

HTML

---

首先，请注意，选中该复选框后，您将重新设置

高度

、

行高

和

溢出

属性。因此，在这种情况下，动画没有任何效果

另外，

height:100%

不会影响元素，因为其父元素没有明确的

height

。因此，需要为height属性使用固定值

此外，CSS动画无法设置属性，并且

行高度
正确（特别是通过
继承
值）

要在关键帧结束时停止动画，应使用带有
forwards
值的属性

以下是速记版本：

.accordeon复选框：选中~.accordeon内容{
-webkit动画：向上滑动1s，轻松前进；
/*狩猎4+*/
-moz动画：向上滑动1s，向前放松；
/*外汇5+*/
-o型动画：向上滑动1s，向前放松；
/*歌剧院12+*/
动画：向上滑动1s，向前放松；
/*IE 10+*/
}


关闭面板的问题
但是使用动画有一个问题。由于动画仅在选中复选框时应用于元素，因此在第二次单击时取消选中复选框后，面板将立即关闭，而无任何动画

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

给你：

.accordeon内容{
身高：0；
溢出：隐藏；
背景颜色：金色；
/*其他供应商前缀在这里*/
过渡：高度1秒；
}
.accordeon复选框：选中~.accordeon内容{
高度：400px；
}

这方面的问题与我见过的所有其他类似示例都是一样的。你必须定义高度。在响应性的时代，这是不可能的。@ChristianMatthew不需要明确指定
height
，只需设置
max height
动画即可：酷。这适用于ie 9吗？同样，你能想到这种方法的其他局限性吗？例如，我看到你将最大高度设置为999px，这本身就是一个估计值吗？哈哈，你不认为你在评论中给出的小提琴是更好的答案吗？对我来说效果更好。@ChristianMatthew是的，价值是估算出来的。这种方法的一个缺点是，该值应该足够高，以便不剪裁元素。事实上，这个问题有点不同，但我会尽快更新答案，将此方法包括在内。
<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>

 /*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%; }
    }