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;
}

在here

上工作

在ngShow上隐藏/显示动画

1 个答案: