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