如何使用 HTML5 细节/摘要标签显示添加 CSS3 过渡？

Question

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

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

 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 似乎选择器没有—上班。我尝试在 section 和 details 标签的高度上使用 CSS3 过渡，但它没有帮助。

原文由 Volomike 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

除了 Volomike 的回答 之外，出于性能原因，还可以将 margin-left 更改为 transform: translateX() 。

 details[open] summary ~ * {
  animation: sweep .5s ease-in-out;
}

@keyframes sweep {
  0%    {opacity: 0; transform: translateX(-10px)}
  100%  {opacity: 1; transform: translateX(0)}
}

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

原文由 Felipe Saldanha 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这应该解决它。

 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 。

原文由 Volomike 发布，翻译遵循 CC BY-SA 4.0 许可协议