是否可以对< details>的开/关状态之间的转换进行动画化.元素只是CSS？
解决方法
不,目前不是.是的,但只有当您知道高度或可以动画字体大小.
最初,情况并非如此.从http://html5doctor.com/the-details-and-summary-elements/开始,“…如果您可以使用CSS过渡来开启和关闭动画,但是我们还不能. (HTML5医生近期有评论,但似乎需要JS强制CSS动画.)
根据是打开还是关闭,可以使用不同的样式,但是转换没有“正常”.然而,今天,如果您知道高度或可以动画字体大小,则转换将起作用.有关示例和更多详细信息,请参阅http://codepen.io/morewry/pen/gbJvy.
这是2013年的解决方案：
CSS(可能需要添加前缀)
/* http://daneden.me/animate/ */
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-1.25em);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.details-animated[open] {
animation-name: fadeInDown;
animation-duration: 0.5s;
}
HTML
<details class="details-animated">
<summary>CSS Animation - Summary</summary>
Try using [Dan Eden's fadeInDown][1] to maybe fake it a little. Yay,some animation.
</details>
今天工作：
CSS(可能需要添加前缀)
.details-animated {
transition: height 1s ease;
}
.details-animated:not([open]) { height: 1.25em; }
.details-animated[open] { height: 3.75em; }
PS：仅在Chrome中测试.听到FF一般不支持细节. IE和Edge仍然不支持详细信息.
(您可以使用关键帧动画或过渡来进行各种其他动画的开放,我已经选择了fadeInDown作为说明目的,这是一个合理的选择,如果您无法添加额外的标记或不会知道内容的高度,但您的选择不限于此：请参阅此答案的评论,其中包括两种替代方法,包括字体大小的方法.)
