仅使用CSS3，有没有一种方法可以在页面上添加漂亮的淡入和从左滑动过渡效果DETAILS/SUMMARY reveal?
有关此新标签的演示，请参阅此演示：
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选择器似乎不起作用。我尝试在高度上使用 CSS3 过渡section and details标签，但没有帮助。
这应该可以解决它。
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 https://stackoverflow.com/users/5402397/andrew指出这一点。我改编了他的答案。这是它的工作原理。通过添加[open]属性上的DETAILS标签，它仅在单击时触发动画关键帧。然后，通过添加SUMMARY ~ *它的意思是“之后的所有元素SUMMARY标签”，以便动画适用于那些，而不是SUMMARY元素也是如此。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
