Question

我有一个居中的文字。它每4秒更换一次。我希望在显示文本时：它会从右边（不透明度= 0）到中心（不透明度= 1），当文本被隐藏时，它将从中心（opacity = 1）到左边（opacity = 0）。

这就是我的尝试：

.fade.ng-enter {
  transition:0.5s ease-out all;
  opacity:0;
}

.fade.ng-enter.ng-enter-active {
  opacity:1;
}

.fade.ng-leave {
  transition:0.5s linear all;
  opacity:1;
}
.fade.ng-leave.ng-leave-active {
  opacity:0;
}

这是我的代码： https://codepen.io/anon/pen/jwNomv

任何帮助表示赞赏！

Answer 1

您不依赖ng-animate。即使你做了，它也不会起作用，因为ng-animate支持ng-view，ng-show，ng-hide，ng-repeat等指令。

您正在做的只是更改可见文字。您需要使用这些指令中的任何一个来进行ng-animate工作。

相反，如果您希望它能够工作，您必须自己添加这些类，并且可以使用JQlite API完成，您可以使用addClass()，removeClass()和{{1 }}

toggleClass()

使用KeyFrames的另一个解决方案已经实施here。

Answer 2

您应该使用webkit动画。您可以在https://www.w3schools.com/css/css3_animations.asp

找到更多信息

淡入（从右到中）并离开（从中心到左）

2 个答案: