Question

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

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

以下是它的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

这应该解决它。

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指出这一点。我调整了他的答案。这是如何工作的。通过在[open]标记上添加DETAILS属性，它仅在单击时触发动画关键帧。然后，通过添加SUMMARY ~ *，它意味着“SUMMARY标记之后的所有元素”，以便动画适用于那些，而不是SUMMARY元素。

Answer 2

我的造型……

使用 max-height 代替 height 进行过渡，您可以在打开的详细信息中具有未知高度（小于 99rem）的内容

details {
margin: 1.3rem 0;
border-bottom: 1px solid #aaa;
padding: 0.5rem;
height: auto;
max-height: 1.5rem; /* set to line heihgt */
transition: all 0.1s ease;
}

details[open] {
max-height: 99rem;
transition: all 1s ease;
border: 1px solid #aaa;
}

details summary {
font-weight: bold;
cursor: pointer;
margin-bottom: 0.5em;
font-weight: bold;
margin: -0.5em -0.5em 0;
padding: 0.5em;
}

details[open] summary {
border-bottom: 1px solid #aaa;
margin-bottom: 0.8em;
}

<details>
    <summary>Sometning like… questin?</summary>
    And some very, very long explanation of summarised text. And some very, very long explanation of summarised text. And some very, very long explanation of summarised text
</details>

希望你会喜欢

Answer 3

如果您不打算在将鼠标悬停在其上时显示它，则可能需要使用keyframes使用CSS动画。如果您只想显示动画，例如，当您在页面上看到详细信息/摘要描述时，可以使用一些jQuery，以便浏览器在滚动时添加动画类。

https://jsfiddle.net/22e95bxt/

这是你要找的吗？

编辑：哎呀。这不是你要求的。我的坏！

Answer 4

＆＃13;

details
{
    transition: height 1s ease;
    overflow: hidden;
}

details:not([open])
{
    height: 1.25em;
}

details[open]
{
    height: 2.50em;
}

＆＃13;

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

＆＃13;

我建议您在此处查看Animate.css：http://daneden.me/animate。如果

Answer 5

除了 Volomike's answer 之外，出于性能原因，还可以将 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>

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

5 个答案: