Html 在细节元素中打开关闭之间转换

是否可以仅使用CSS设置

元素的打开/关闭状态之间的转换动画

没有，目前没有。可以，但前提是您知道

高度

或可以设置

字体大小

的动画

起初，情况并非如此。从“…如果您可以使用CSS转换来设置开头和结尾的动画，但我们现在还不能。”（HTML5 doctor在结尾处有一条评论，但似乎需要JS来强制CSS动画。）

可以根据打开还是关闭使用不同的样式，但转换通常不会“进行”。但是，今天，如果您知道

高度

，或者可以设置

字体大小

的动画，则过渡确实有效。有关示例和更多详细信息，请参见

这是2013年的解决方案，它是一种伪造的解决方案：

CSS（可能需要添加前缀）

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>

PS：仅在铬合金中测试。Hear FF通常仍不支持

详细信息

。IE和Edge仍然不支持

详细信息

---

（您可以使用关键帧动画或过渡来为open制作各种其他动画。我选择的

fadeInDown

仅用于演示目的。如果您无法添加额外标记或不知道内容的高度，这是一个合理的选择，会给您类似的感觉。但是，您的选项不限于此：请参阅此答案上的注释，其中包括两种可选方法，包括

字体大小
方法。）
鉴于高度必须在某个点捕捉，我更愿意开始设置高度动画，然后捕捉。如果您足够幸运，使所有元素具有相似的高度，此解决方案将非常有效。（不过，在details元素中确实需要一个div）

例如，请参见
我的简短回答是：您不能在摘要和其他详细内容之间转换

但是！

您可以在摘要中的选择器详细信息和详细信息[打开]


详细信息{
位置：相对位置；
宽度：100px；高度：100px；
透视图：1000px；
}
div{
位置：绝对位置；
顶部：20px；
宽度：100px；高度：100px；
背景：黑色；
}
细节.过渡{
过渡：1s线性；
变换原点：右上角；
;
}
详细信息[打开]。转换{
变换：旋转（180度）；
背景：橙色；
}
当然有可能：


详细信息[打开]摘要~*{
动画：扫掠3秒，轻松进出；
}
@关键帧扫描{
0% {
不透明度：0；
左边距：-10px
}
100% {
不透明度：1；
左边距：0px
}
}

摘要内容
测试测试。
您可以尝试在此处设置ITR相关建议的高度动画，但遗憾的是，它不起作用。顺便说一句，我用小提琴复制了您的示例，但它不起作用，我看不到任何变化。它对我有效，但它只适用于
-webkit
、
-moz
和
-o
（这是一个简化的代码示例）.我刚才还在编辑它。Codepen.io有一个“前缀free”CSS选项——我不记得JSFIDLE是否有？请验证最新的代码，并可能希望尝试添加前缀。抱歉，我没有检查前缀。可选地，为可视化扩展设置
font size
动画。这是一项很好的技术，但在这种情况下会出现问题。首先，示例中使用的CSS转换不起作用，不仅因为
高度问题的se。在
详细信息上使用
不透明度：0
将隐藏
摘要
，并且
字体大小：0
将被
摘要
继承。这使得
摘要
在
不（[open]）
时不可见，因此无法打开它（或者在单击后它会突然消失）。这些问题必须通过关键帧动画、附加包装元素和附加样式来解决。在可能的情况下，它确实有助于提高高度；因此，谢谢！我将其添加到了画笔中。虽然此代码可以回答问题，但提供有关如何和/或为什么解决问题的附加上下文将改进答案的准确性s的长期价值。请阅读此提供高质量的答案。
<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>

.details-animated {
  transition: height 1s ease;
}
.details-animated:not([open]) { height: 1.25em; }
.details-animated[open] { height: 3.75em; }

@keyframes slideDown {
    0% {
        opacity: 0;
        height: 0;
    }
    100% {
        opacity: 1;
        height: 20px; /* height of your smallest content, e.g. one line */
    }
}
details {
    max-width:400px;
}
details[open]>div {
    animation-name: slideDown;
    animation-duration: 200ms;
    animation-timing-function:ease-in;
    overflow:hidden;
}