html - 在细节元素中打开关闭之间的转换

Question

是否可以为 <details> 的打开/关闭状态之间的转换设置动画？只用 CSS 的元素？

Answer 1

不，目前不是。是的，但前提是您知道高度或可以设置font-size的动画。

最初，情况并非如此。来自 http://html5doctor.com/the-details-and-summary-elements/ , “...如果您可以使用 CSS 转换来设置打开和关闭的动画，但我们还不能。”(HTML5 doctor 接近尾声时有评论，但它似乎需要 JS 强制 CSS 动画。)

可以根据它是打开还是关闭来使用不同的样式，但转换不会正常“发生”。然而，今天，如果您知道 height 或可以为 font-size 设置动画，则过渡效果确实有效。参见 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 总体上还是不支持 details。 IE 和 Edge 79 之前的版本仍然不支持 details。

(您可以使用关键帧动画或过渡来为打开执行各种其他动画。我选择 fadeInDown 只是为了说明目的。这是一个合理的选择，如果您无法添加额外的标记或不知道内容的高度。但是，您的选择不限于此:请参阅对此答案的评论，其中包括两个备选方案，包括 font-size 方法。)