在打开关闭之间的细节元素的过渡 [英] 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?

推荐答案

不，目前不是。是，但前提是您知道 height 或者可以对 font-size 进行动画处理。

No, not currently. Yes, but only if you know the height or can animate the font-size.

t的情况。从 http://html5doctor.com/the-details-and-summary-elements/ ，...如果您可以使用CSS转换来动画开始和结束，但我们还不能。（HTML5医生在结束附近有评论，但它似乎需要JS强制CSS动画。）

Originally, this wasn't the case. 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.)

可以使用不同的样式，基于它是否打开或关闭，但转换没有 一般。然而，今天，如果你知道 height 或者可以动画 font-size ，转换会起作用。有关示例和更多详细信息，请参见 http://codepen.io/morewry/pen/gbJvy 。

It was possible to use different styles based on whether it's opened or closed, but transitions didn't "take" normally. Today, however, the transitions do work if you know the height or can animate the font-size. See http://codepen.io/morewry/pen/gbJvy for examples and more details.

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

This was the 2013 solution that kind of fakes it:

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 （可能需要添加前缀）

CSS (May need to add prefixes)

.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 仅供参考，如果您无法添加额外的标记或不知道内容的高度，这是一个合理的选择，将给出类似的感觉，但您的选项不限于此：请参阅评论在这个答案包括两个选择，包括 font-size 方法。）

(You can use keyframe animations or transitions 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 are unable to add extra markup or will not know the height of the contents. Your options are, however, not limited to this: see the comments on this answer that include two alternatives, including the font-size approach.)

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