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

Question

我有一个居中的文本。它每4秒更换一次。 我希望当显示文本时：它会从右边（不透明度= 0）到中心（不透明度= 1）， ，并且当文本被隐藏时，它会从中心（透明度= 1）到左边（不透明度= 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; 
} 

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

任何帮助表示赞赏！

Answer 1

找到更多的信息你没有依赖于ng-animate。即使你这样做，也不行，因为ng-animate支持像ng-view，ng-show,ng-hide,ng-repeat这样的指令。

你在做什么只是简单地改变可见文本。您需要利用这些指令中的任何一个来制作有生气的作品。如果你想让它工作，你将不得不自己添加这些类，并且可以使用JQlite API完成，你可以使用addClass()，removeClass()和toggleClass()。

var element = angular.element('id'); 

/** Use timeouts to clearly decide when an element at which state. */ 
element.addClass('ng-enter'); 

一种使用关键帧的另一解决方案已经实现here。

Answer 2

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