如何添加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元素.

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效