如何添加CSS3过渡HTML5详细信息/摘要标记显示？

Question

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

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

https://jsfiddle.net/43m61yt0/1/

这是它的HTML：

<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过渡，但它没有帮助。这是我试过的：

<style type="text/css">
DETAILS
{
 transition:height 3s ease-in;
}
</style>

Answer 1

这应该解决它。

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指出这一点。我调整了他的答案。这是如何工作的。通过在[open]标记上添加DETAILS属性，它仅在单击时触发动画关键帧。然后，通过添加SUMMARY ~ *，它意味着“SUMMARY标签之后的所有元素”，以便动画适用于那些，而不是SUMMARY元素。

Answer 2

您可能希望使用keyframes使用CSS动画，如果您不打算在将鼠标悬停在它上面时显示它。如果您只想要显示动画，例如，当您在页面上看到详细信息/摘要描述时，您可以使用一些jQuery，以便浏览器在滚动时添加动画类。

https://jsfiddle.net/22e95bxt/

这是你在找什么？

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

Answer 3

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。如果