如何使用 HTML5 详细信息/摘要标签添加 CSS3 过渡？

Question

仅使用 CSS3，有没有办法在 DETAILS/SUMMARY 显示上添加漂亮的淡入和从左滑动的过渡效果？

有关此新标签的演示，请参阅此演示：

details {
  transition:height 3s ease-in;
}

<details>
  <summary>Copyright 1999-2014.</summary>
  <section>
    <p> - by Refsnes Data. All Rights Reserved.</p>
    <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
  </section>
</details>

在我的例子中，在summary 标记之后，我将所有其他内容放在它自己的section 标记中，以便我可以设置它的样式，因为summary:after 选择器似乎不起作用。我尝试在 section 和 details 标签的高度上使用 CSS3 过渡，但没有帮助。

Answer 1

如果您不打算在鼠标悬停时显示它，您可能希望使用带有 keyframes 的 CSS 动画。如果你只想让动画出现，比如说，当你在页面上看到细节/摘要描述时，你可以使用一些 jQuery 让浏览器在滚动时添加动画的类。

https://jsfiddle.net/22e95bxt/

这是你要找的吗？

编辑：哎呀。这不是你要的。我的错！

Answer 2

details
{
    transition: height 1s ease;
    overflow: hidden;
}

details:not([open])
{
    height: 1.25em;
}

details[open]
{
    height: 2.50em;
}

<details>
    <summary>Example</summary>
    Height needs to be set for this to work. Works on Chrome, haven't tested further.
</details>

我建议您也在这里查看 Animate.css：http://daneden.me/animate。如果

Answer 3

这应该可以解决它。

details[open] summary ~ * {
  animation: sweep .5s ease-in-out;
}

@keyframes sweep {
  0%    {opacity: 0; margin-left: -10px}
  100%  {opacity: 1; margin-left: 0px}
}

<details>
  <summary>Copyright 1999-2014.</summary>
  <p> - by Refsnes Data. All Rights Reserved.</p>
  <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

感谢Andrew 指出这一点。我改编了他的回答。这是它的工作原理。通过在DETAILS 标签上添加[open] 属性，它只会在单击时触发动画关键帧。然后，通过添加SUMMARY ~ * 表示“SUMMARY 标记之后的所有元素”，以便动画适用于这些元素，而不是 SUMMARY 元素。

Answer 4

我的造型……

使用max-height 而非height 进行转换，您可以在打开的细节中拥有未知高度（小于99rem）的内容。

details {
  margin: 1.3rem 0;
  border-bottom: 1px solid #aaa;
  padding: 0.5rem;
  height: auto;
  max-height: 1.5rem; /* set to line height */
  transition: all 0.1s ease;
}

details[open] {
  max-height: 99rem;
  transition: all 1s ease;
  border: 1px solid #aaa;
}

details summary {
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 0.5em;
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: 0.8em;
}

<details>
  <summary>Something like… question?</summary>
  And some very, very long explanation of summarised text. And some very, very long explanation of summarised text. And some very, very long explanation of summarised text
</details>

Answer 5

除了Volomike's answer，出于性能原因，还可以将margin-left 更改为transform: translateX()。

details[open] summary ~ * {
  animation: sweep .5s ease-in-out;
}

@keyframes sweep {
  0%    {opacity: 0; transform: translateX(-10px)}
  100%  {opacity: 1; transform: translateX(0)}
}

<details>
  <summary>Copyright 1999-2014.</summary>
  <p> - by Refsnes Data. All Rights Reserved.</p>
  <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>