如何添加CSS3过渡HTML5详细信息/摘要标记显示？

Question

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

在我的情况下,在summary标记之后,我将所有其他内容放在自己的section标记中,以便我可以设置样式,因为summary:after选择器似乎不起作用.我尝试在section和details标签的高度上使用CSS3过渡,但它没有帮助.这是我试过的:

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

Answer 1

对于那些寻找打开/关闭转换的人来说，可以通过margin-bottom属性来伪造它。

details {
  background: gainsboro;
  padding: 10px;
}

details summary {
  cursor: pointer;
  margin-bottom: -10px; /* for more prominent move */
  transition: margin 150ms ease-out;
}

details[open] summary {
  margin-bottom: 10px;
}

<details>
  <summary><code>&lt;details&gt;</code> pseudo content transition</summary>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.
</details>

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>

安德鲁指出这一点有些功劳.我调整了他的答案.这是如何工作的.通过[open]在DETAILS标记上添加属性,它仅在单击时触发动画关键帧.然后,通过添加SUMMARY ~ *它意味着" SUMMARY标签之后的所有元素",以便动画适用于那些,而不是SUMMARY元素.

Answer 3

details
{
    transition: height 1s ease;
    overflow: hidden;
}

details:not([open])
{
    height: 1.25em;
}

details[open]
{
    height: 2.50em;
}

<details>
    <summary>Example</summary>
    Height needs to be set for this to work. Works on Chrome, haven't tested further.
</details>

我建议你也在这里查看 Animate.css：http ://daneden.me/animate 。如果

Answer 4

我认为真正的 CSS3 细节摘要显示应该像这样完成（没有固定高度，也没有 javascript）：

@keyframes animate {
  from {grid-template-rows: 0fr;}
  to {grid-template-rows: 1fr;}
}
details > div {
  display: grid;
  grid-template-rows: 0fr;
  transition: all ease-in-out 0.5s;
}
details > div > div {
  overflow: hidden;
}
details[open] > div {
  animation: animate 0.15s 0s 1 normal forwards;
}

<details>
  <summary>Lorem ipsum</summary>
  <div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus suscipit neque vestibulum elit vehicula luctus. Aenean eget rutrum felis. Ut blandit, massa vitae pulvinar suscipit, nunc lorem pulvinar metus, sed elementum lectus erat euismod eros. Aliquam ac metus id tortor maximus mollis. Sed semper pulvinar risus. Mauris orci mauris, blandit tempus dolor sed, tincidunt pharetra nisi. Cras pulvinar ligula eu sapien cursus, in malesuada diam volutpat. Ut eleifend risus vitae eros pretium rhoncus. Nunc diam nibh, pharetra et orci eu, rutrum congue augue. Etiam quis tempor tortor. Pellentesque nec faucibus mi. Curabitur vitae tempus lorem.
    </div>
  </div>
</details>
<details>
  <summary>Lorem ipsum</summary>
  <div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus suscipit neque vestibulum elit vehicula luctus. Aenean eget rutrum felis. Ut blandit, massa vitae pulvinar suscipit, nunc lorem pulvinar metus, sed elementum lectus erat euismod eros. Aliquam ac metus id tortor maximus mollis. Sed semper pulvinar risus. Mauris orci mauris, blandit tempus dolor sed, tincidunt pharetra nisi. Cras pulvinar ligula eu sapien cursus, in malesuada diam volutpat. Ut eleifend risus vitae eros pretium rhoncus. Nunc diam nibh, pharetra et orci eu, rutrum congue augue. Etiam quis tempor tortor. Pellentesque nec faucibus mi. Curabitur vitae tempus lorem.
    </div>
  </div>
</details>

<br>
<br>

Inspired by <a href="https://www.youtube.com/watch?v=B_n4YONte5A">Kevin Powell</a>

Answer 5

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