没有显示的 CSS 动画关键帧可以淡入，但不能淡出

Question

我有一个元素在开始时没有显示。当我向它添加一个类时，我希望它使用 CSS 淡入。

我发现this tutorial 使用了非常适合淡入的关键帧。但是如果我想以同样的方式淡出，元素会立即隐藏而没有动画。

基本上是这样的：

.box {
  display: none;
  opacity: 0;
  animation: FadeOut 1s ease-in-out;

  &.active {
    display: block;
    opacity: 1;
    animation: FadeIn 1s ease-in-out;
  }
}

这是一个“工作”示例： http://codepen.io/MickL/pen/NAopXN

Answer 1

尝试为display:none 设置动画是您问题的根源。为什么淡入起作用而淡出不起作用的困惑不是来自于同时使用display和opacity的组合。

display 属性仅取决于是否应用了.active；动画实际上并没有改变它，而 opacity 按预期动画。在淡入时，这意味着您立即显示您的元素，然后从透明过渡到不透明。在淡出时，这意味着您立即隐藏元素，然后在隐藏时从不透明过渡到透明。

有几种不同的方法可以解决这个问题，但这在某种程度上取决于上下文。例如，您可以将其保留为 block 元素并使用 height 属性使其折叠：

$('button').on('click', function(e) {
  e.preventDefault();
  $(this).siblings('.box').toggleClass('active');
})

@import "bourbon";
 * {
  box-sizing: border-box;
  text-align: center;
}
button {
  margin: 30px 0;
  border: 1px solid #ccc;
  text-align: center;
  padding: 1em;
  background: none;
  box-shadow: none;
}
.box {
  margin: 0 auto;
  width: 80%;
  height: 0;
  display: block;
  line-height: 100px;
  background: #ccc;
  border: 1px solid #444;
  text-align: center;
  opacity: 0;
  animation: FadeOut 1s ease-in-out;
}
.box.active {
  display: block;
  height: initial;
  opacity: 1;
  animation: FadeIn 1s ease-in-out;
}
@keyframes FadeIn {
  0% {
    opacity: 0;
    height: initial;
  }
  100% {
    opacity: 1;
    height: initial;
  }
}
@keyframes FadeOut {
  0% {
    opacity: 1;
    height: initial;
  }
  99% {
    opacity: 0;
    height: initial;
  }
  100% {
    height: 0;
    opacity: 0;
    height: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col">
  <button class="toggle-good">Toggle display</button>
  <p class="box good">I move nicely!</p>
  <p>Extra paragraph to show collapse</p>
</div>

Answer 2

您不能为显示属性设置动画或过渡。

注意：这并不是说您不能在关键帧动画中使用它，但这与实际上对其进行动画处理不同。

您的 Codepen 演示无法按预期工作的原因是因为 .active 类正在被删除立即所以动画没有时间触发，默认 display:none 现在是立即申请。

由于您无论如何都在使用 Jquery，因此有一个内置函数 fadeToggle 可以满足您的需求。

$('button').on('click', function(e) {
  e.preventDefault();
  $(this).siblings('.box').fadeToggle(500);
})

* {
  box-sizing: border-box;
  text-align: center;
}
button {
  margin: 30px 0;
  border: 1px solid #ccc;
  text-align: center;
  padding: 1em;
  background: none;
  box-shadow: none;
}
.box {
  margin: 0 auto;
  width: 80%;
  display: none;
  line-height: 100px;
  background: #ccc;
  border: 1px solid #444;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col">
  <button class="toggle-good">Toggle display</button>
  <p class="box good">I move nicely!</p>
</div>