Question

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

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

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

<强> BUT！

您可以在选择详细信息和详细信息[打开]

之间的摘要中进行一些不错的转换

＆＃13;

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;
}

＆＃13;

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

＆＃13;

注意：我回答这个问题是因为这是谷歌搜索的第一个结果！

Answer 3

鉴于高度必须在某些点捕捉，我更喜欢开始为高度设置动画，然后拍摄。如果你有幸拥有所有元素相同的高度，这个解决方案可以非常有效。（你的细节元素中确实需要一个div）

@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;
}

请参阅http://dabblet.com/gist/5866920例如

Answer 4

当然有可能：

<style type="text/css">    
    DETAILS[open] SUMMARY ~ * {
        animation: sweep .5s ease-in-out;
    }
    @keyframes sweep {
        0%    {opacity: 0; margin-left: -10px}
        100%  {opacity: 1; margin-left: 0px}
    }
</style>

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

4 个答案: