在 ngShow 上隐藏/显示动画

Question

我正在尝试使用 AngularJS 进行某种演示，并且我想使用 ngAnimation 的强大功能，到目前为止，这非常困难。

我已经能够将 fadeIn 和 fadeOut 与 CSS 过渡一起使用而没有太多问题，但现在，我一直在努力解决这个问题。

我希望文本来自上方，当下一张“幻灯片”出现时，当前文本应为 fadeOutDown，下一个文本应为 fadeInDown，与上一个一样。

所以，类应该是这样的：

.animation-fadeInDown-fadeOutDown.ng-hide-add,
.animation-fadeInDown-fadeOutDown.ng-hide-remove {
    display: table-cell !important;
}

.animation-fadeInDown-fadeOutDown.ng-hide-add {
    animation-duration: 1.5s;
    animation-name: fadeOutDown;
}

.animation-fadeInDown-fadeOutDown.ng-hide-remove {
    animation-delay: 10s;
    animation-duration: 1.5s;
    animation-name: fadeInDown;
}

实际发生的是两个动画最终重叠并显示不正确。我准备了一个plunk，其中包含一些样板代码，可以显示现在的问题。你很快就会意识到发生了什么。

我做错了什么？

Answer 1

我认为你没有在你的类中使用好的 CSS 属性：

.animation-fadeInDown-fadeOutDown.ng-hide-add,
.animation-fadeInDown-fadeOutDown.ng-hide-remove

尝试使用以下 CSS 规则，它应该可以解决您的问题。

.animation-fadeInDown-fadeOutDown.ng-hide-add,
.animation-fadeInDown-fadeOutDown.ng-hide-remove {
  display:block!important;
}

.animation-fadeInDown-fadeOutDown.ng-hide-add {
  opacity : 1;
  -webkit-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-name: fadeOutDown;
  -moz-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

.animation-fadeInDown-fadeOutDown.ng-hide-remove {
  opacity : 0;
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  animation-delay: 1.5;
  -webkit-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-name: fadeInDown;
  -moz-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

在here 上工作的笨蛋