动画和过渡超时不起作用

Question

这里有一个 fiddle 可以玩：https://jsfiddle.net/qgchhn99/

我正在尝试延迟动画和过渡，但由于某种原因它不起作用。动画和不透明度过渡立即运行，而不是等待 4 秒。

我在提交表单时收到一条状态消息（类是动态添加的）：

<p class="success success--auto-hide">Some message</p>

然后我有这个动画，它会在 4 秒后隐藏元素：

@-webkit-keyframes cssAnimation {
  to {
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }
}

@keyframes cssAnimation {
  to {
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }
}

但是，我也希望隐藏平滑，所以我在 opacity 上添加了一个过渡以及隐藏动画：

.success {
  color: green;
  opacity: 1;
  -webkit-transition-delay: 4s;
  transition-delay:         4s;
  -webkit-transition: opacity 4s ease-in-out;
  transition:         opacity 4s ease-in-out;
}

.success--auto-hide {
  opacity: 0;
  -webkit-animation-delay: 4s;
  animation-delay:         4s;
  -webkit-animation: cssAnimation 0s ease-in 4s forwards;
  -moz-animation:    cssAnimation 0s ease-in 4s forwards;
  -o-animation:      cssAnimation 0s ease-in 4s forwards;
  animation:         cssAnimation 0s ease-in 4s forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode:         forwards;
}

我确定我已经接近正确了，那么我应该如何修改它以便动画和过渡在执行前都等待 4 秒？

Answer 1

使用 .success--auto-hide class 您已经在动画开始之前隐藏了元素，使用 'opacity: 0;'。

当你删除它时，它工作正常！

此外，您现在将延迟时间设置为两倍，因此您也可以删除动画延迟属性。

看这里：http://codepen.io/anon/pen/WvKjWY

Answer 2

我通过将动画持续时间从 0s 增加到 4s 设法解决了这个问题。将其设置为 0 会导致隐藏动画立即执行，从而防止不透明度与动画并行过渡到运行。我还将不透明度持续时间减少到 3s 而不是 4s 以允许它在将宽度和高度设置为 0 之前完全隐藏，这会导致文本以一种奇怪的方式跳下来进行拆分在它完全隐藏之前的第二个。

我还意识到我已经在 shorthand 中设置了延迟，所以我可以完全删除 animation-delay 属性。

.success {
  color: green;
  opacity: 1;
  -webkit-transition-delay: 3s;
  transition-delay:         3s;
  -webkit-transition: opacity 4s ease-in-out;
  transition:         opacity 4s ease-in-out;
}

.success--auto-hide {
  opacity: 0;
  -webkit-animation: cssAnimation 4s ease-in 4s forwards;
  -moz-animation:    cssAnimation 4s ease-in 4s forwards;
  -o-animation:      cssAnimation 4s ease-in 4s forwards;
  animation:         cssAnimation 4s ease-in 4s forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode:         forwards;
}

动画和过渡超时不起作用

Animation and transition timeout isn't working

css

animation

transition