javascript - 在 ngShow 上隐藏/显示动画

Question

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

我已经能够使用 fadeIn和 fadeOut使用 CSS Transitions 没有太大问题，但现在，我一直在努力解决这个问题。

我希望文本来自上方，当下一张“幻灯片”出现时，当前文本应为 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;
}

工作 plunker here