Question

我正在尝试延迟动画和转换，但由于某种原因它不起作用。动画和不透明度转换立即运行，而不是等待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类，您已经在动画开始之前使用'opacity: 0;'隐藏了元素。

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

此外，您现在提供两次延迟时间，因此您也可以删除动画延迟属性。

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

Answer 2

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

我也意识到我已经在速记中设置了延迟，所以我可以完全删除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;
}

动画和转换超时不起作用

2 个答案: