如何添加CSS3转换HTML5详细信息/摘要标记显示？ [英] How To Add CSS3 Transition With HTML5 details/summary tag reveal?

问题描述

只使用CSS3，有没有办法在 DETAILS / 摘要中添加一个漂亮的淡入和左滑动过渡效果透露？

Using just CSS3, is there a way to add a nice fade-in and slide-from-left transition effect on a DETAILS/SUMMARY reveal?

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

For a demo of this new tag, see this demo:

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>

在我的情况下，在汇总标签之后，我将所有其他内容放在自己的部分标记中，以便我可以设置样式，因为摘要：在选择器之后没有'似乎工作。我尝试在部分和详细信息标记的高度上使用CSS3过渡，但它没有帮助。这是我尝试过的：

In my case, after the summary tag, I put all other content in its own section tag so that I could style it because summary:after selector didn't seem to work. I tried using CSS3 transitions on height for the section and details tag, but it didn't help. Here's what I tried:

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

推荐答案

这应该解决它。

This should fix it.

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

Some credit goes to Andrew for pointing this out. I adapted his answer. Here's how this works. By adding the [open] attribute on the DETAILS tag, it only fires the animation keyframe when clicked. Then, by adding SUMMARY ~ * it means "all elements after the SUMMARY tag" so that the animation applies to those, and not the SUMMARY element as well.

这篇关于如何添加CSS3转换HTML5详细信息/摘要标记显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！