css - 如何为 <details> 隐藏设置​​动画？

Question

我使用@keyframes 来制作详细信息标签打开的动画。现在我想要动画关闭，但我找不到为此的 CSS 解决方案。 @keyframes 用于关闭不起作用。请参阅代码片段。 只需要 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>

Answer 1

由于 <details>由于存在一些限制，我创建了一个 fiddle ，其中我为 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/

另请查看此 answer作者:@morewry