21

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

4

4 回答 4

22

不，目前没有。是的，但前提是您知道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 79 之前的版本仍然不支持details.

（您可以使用关键帧动画或过渡来执行各种其他动画以进行打开。我选择fadeInDown仅用于说明目的。这是一个合理的选择，如果您无法添加额外的标记或不知道会给出类似的感觉内容的高度。但是，您的选择不仅限于此：请参阅对此答案的评论，其中包括两种选择，包括font-size方法。）

于 2013-06-25T15:48:04.110 回答
11

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

但！

您可以在选择器详细信息和详细信息之间的摘要中进行一些不错的转换[打开]

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>

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

于 2016-11-10T02:25:01.857 回答
4

鉴于高度必须在某个点捕捉，我更喜欢开始为高度设置动画然后捕捉。如果你有幸让所有元素都具有相似的高度，那么这个解决方案可能会非常有效。（不过，您的详细信息元素中确实需要一个 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例如

于 2013-06-27T13:54:31.580 回答
0

当然有可能：

DETAILS[open] SUMMARY ~ * {
  animation: sweep 3s ease-in-out;
}

@keyframes sweep {
  0% {
    opacity: 0;
    margin-left: -10px
  }
  100% {
    opacity: 1;
    margin-left: 0px
  }
}
<details>
  <summary>Summary content</summary>
  Test test test test.
</details>

于 2017-06-10T11:51:14.750 回答