过渡属性不动画

Question

我正在制作手风琴，我的动画无法播放。我已经添加了过渡属性到正在崩溃的块，但没有效果。检查我的沙箱，我重新创建了问题：https://codesandbox.io/s/serene-lederberg-h43kt

.accordion__content {
  background-color: white;
  display: none;
  height: 100%;
  transition: all 0.6s ease-in;
}

Answer 1

根据此post，CSS动画不适用于display属性。您可以尝试使用visibility。

尝试使用

.accordion__content {
  background-color: white;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}

.accordion_display {
  visibility: visible;
  opacity: 1;
}

在您的代码中。