与详细信息标签不一致的 CSS 动画答案

【问题标题】：Inconsistent CSS animation with the details tag与详细信息标签不一致的 CSS 动画
【发布时间】：2022-08-13 21:27:57
【问题描述】：

伴随细节元素打开的动画呈现不一致。它可以使用“扫”动画顺利打开，也可以完全不使用动画立即打开。这可以在打开和关闭细节时看到，等待几秒钟，然后再次打开它。就我而言，动画仅在快速连续单击元素时是一致的。

我希望每次使用 CSS 都能顺利打开细节。我正在使用 Chrome。

.information {
    font-family: Verdana;
    font-size: 11px;
    text-align: left;
    position: absolute;
    top: 30px;
    left: 0x;
    color: #000;
    width: 332px;
}

.details1 {
    color: #000;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 999;
    width: 400px;
}

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

@-webkit-keyframes sweep {
  0%    {opacity: 0; margin-top: 10px}
  100%  {opacity: 1; margin-top: 0px}
}

<center><div class=\"maindiv\" style=\"position: relative;\"><details class=\"details1 \"><summary class=\"summary1\"><span class=\"ring\">◯</span></summary><div class=\"information\">

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div></details></center></div></center></details></div></details></center>

标签： css css-animations

【解决方案1】：

众所周知，<details> 元素很难用纯 CSS 制作动画。

更有机的方法是使用 CSS transition 属性在 .details1[open] 和 .details:not([open]) 之间设置动画，但即使这样也不能解决问题。

来自 MDN 文档：

您可以使用 CSS 设置显示小部件的样式，并且可以通过设置/删除其 open 属性以编程方式打开和关闭小部件。不幸的是，目前还没有内置的方法来动画打开和关闭之间的过渡。

我建议查看this article，了解如何使用 WAAPI（一种 JavaScript 解决方案）制作动画。

【讨论】：