css – 在开放关闭细节元素之间转换

是否可以对< 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作为说明目的,这是一个合理的选择,如果您无法添加额外的标记或不会知道内容的高度,但您的选择不限于此：请参阅此答案的评论,其中包括两种替代方法,包括字体大小的方法.)

原文地址：https://www.jb51.cc/css/216415.html