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

使用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>

在我的情况下,在摘要标记之后,我将所有其他内容放在它自己的section标记中,以便我可以设置它因为summary：在选择器之后似乎没有工作.我尝试在高度上使用CSS3过渡段和细节标签,但它没有帮助.这是我尝试过的：

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

解决方法

这应该解决它.

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元素.