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>有一些限制，我创建了一个小提琴，我在其中设置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>隐藏设置动画？

1 个答案: