如何动画 <details> 隐藏？答案

【问题标题】：How to animate <details> hiding?如何动画 <details> 隐藏？
【发布时间】：2020-10-01 04:30:31
【问题描述】：

我已经使用@keyframes 来制作详细标签打开的动画。现在我想动画关闭，但我找不到 CSS 解决方案。 @keyframes 关闭不起作用。请参阅代码 sn-p。只需要 CSS 解决方案。

.wrapper {
  width: 300px;
  height: 300px;
  background-color: #ecf0f1;
}
details {
  outline: none;
  background-color: #95a5a6;
  cursor: pointer;
}
summary {
  outline: none;
}
details[open] > ul {
  animation-name: fadeIn;
  animation-duration: 1s;
}
details:not([open]) > ul {
  animation-name: fadeOut;
  animation-duration: 1.6s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  100% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}

<div class="wrapper">
  <details>
    <summary>Sample</summary>
    <ul>
      <li>
        <input type="radio" checked/>
        <label>Label 1</label>
      </li>
      <li>
        <input type="radio" />
        <label>Label 2</label>
      </li>
      <li>
        <input type="radio" />
        <label>Label 3</label>
      </li>
    </ul>
  </details>
</div>

【问题讨论】：

在 height 属性上尝试 css 过渡 w3schools.com/css/css3_transitions.asp
您是否注意到您在隐藏和显示中使用相同的fadeIn 关键帧？
Gofilord，感谢您的指出，无论如何它不会改变任何东西。
顺便说一句，fadeIn 和 fadeOut 动画都没有意义。我建议只定义 @keyframes fade 从 0 到 1。然后淡入你可以做 animation: fade 1s linear; 淡出你可以做 animation: fade 1s linear reverse;

标签： css

【解决方案1】：

由于<details> 有一些限制，我创建了一个小提琴，在其中我为 div 及其内容设置动画以匹配您的要求。

使用 Jquery 类切换：

$(document).ready(function(){
    $("#details").click(function(){
        $("#details").toggleClass("Close");
    });
});

并使用过渡：

transition: all 0.3s linear; -webkit-transition: all 0.3s linear;

更改详细标签并添加一些 css。

https://jsfiddle.net/14cpx9kw/2/

还可以查看@morewry 的answer

【讨论】：

您可以将复选框与#details 结合使用，然后使用#details input:checked 将其变成仅css 的解决方案。 css-tricks.com/the-checkbox-hack
不支持将
标记替换为
的解决方案。它破坏了使用 details 标签的语义和可访问性。当然，它确实实现了动画效果