淡入（從右到中）和離開（從中心到左側）

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