在详细信息元素中打开关闭之间转换

Question

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

Answer 1

不,不是.是的,但只有你知道height或可以动画font-size.

最初,情况并非如此.来自http://html5doctor.com/the-details-and-summary-elements/,"......如果你可以使用CSS过渡来为开始和结束设置动画,但我们还不能." (HTML5医生附近有评论,但似乎需要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仍然不支持details.

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

Answer 2

我的简短回答是:您无法在摘要和其他详细内容之间进行转换.

但!

您可以在选择器详细信息和详细信息之间的摘要中做一些很好的转换[打开]

details{
  position: relative;
  width: 100px;height: 100px;
  perspective: 1000px;
}
div{
  position: absolute;
  top: 20px;
  width: 100px;height: 100px;
  background: black;
}
details .transition{
  transition: 1s linear;
  transform-origin: right top;
  ;
}
details[open] .transition{
  transform: rotateY(180deg);
  background: orangered;
}

<details>
  <summary>
    <div></div>
    <div class="transition"></div>
  </summary>
</details>

NB:我回答这个问题,因为这是谷歌搜索的第一个结果!