在打开关闭之间的细节元素的过渡 [英] Transitioning between open close in details element

问题描述

是否可以使用CSS创建< details> 元素的打开/关闭状态之间的转换动画？

Is it possible to animate the transition between the open/close state of the <details> element with just CSS?

推荐答案

不，目前不是。

从 http://html5doctor.com/the -details-and-summary-elements / ，...如果你可以使用CSS transition来设置开始和结束的动画，但我们还不能。在HTML5医生接近结束的评论，但它似乎需要JS强制CSS动画。）

From http://html5doctor.com/the-details-and-summary-elements/, "...if you could use CSS transitions to animate the opening and closing, but we can’t just yet." (There is a comment at HTML5 doctor near the end, but it appears to require JS to force the CSS animation.)

可以使用不同的样式，基于它是否打开或关闭，但过渡不正常采取。请参阅 http://codepen.io/morewry/pen/gbJvy 。

It is possible to use different styles based on whether it's opened or closed, but transitions don't "take" normally. See http://codepen.io/morewry/pen/gbJvy.

这种伪造：

CSS （有限支持，需要添加前缀）

CSS (Limited support & will need to add prefixes)

/* http://daneden.me/animate/ */
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-1.25em);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.detailsanim[open] {
    animation-name: fadeInDown;
    animation-duration: 0.5s;
}

HTML

<details class="detailsanim">
    <summary>CSS Animation - Summary</summary>
    Try using [Dan Eden's fadeInDown][1] to maybe fake it a little.  Yay, some animation.
</details>

PS：仅在Chrome中测试。听到FF仍然不支持一般的细节。

PS: Only tested in Chrome. Hear FF still doesn't support details in general.

（你可以使用关键帧动画做各种其他动画为开放我选择了fadeInDown只是为了说明的目的，这是一个合理的选择，将给出一个类似的感觉，如果你不想添加额外的标记或不知道内容的高度。 ，不限于此。）

(You can use keyframe animations to do all sorts of other animations for open. I've chosen fadeInDown for illustration purposes only. It is a reasonable choice which will give a similar feel if you do not want to add extra markup or will not know the height of the contents. Your options are, however, not limited to this.)

这篇关于在打开关闭之间的细节元素的过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！