如何淡入/淡出AngularJS应用程序中的文本？

Question

我有一个AngularJS网络应用程序，它在屏幕上闪烁3秒，屏幕上显示每个人5秒：Hello,World & Goodbye。

这里是我的控制器：

self.currentIndex = 0; 
self.myTexts = ['Hello', 'World', 'Goodbye']; 
self.currentText = self.myTexts[self.currentIndex]; 

var currentInterval = $interval(function() { 
    self.currentText = self.myTexts[++self.currentIndex % self.myTexts.length]; 
}, 5000); 

// Clear the interval to prevent memory leaks 
$scope.$on('destroy', function() { 
    $interval.cancel(currentInterval); 
    currentInterval = undefined; 
}); 

这里是角模板：

<div ng-controller="MyCtrl as myCtrl"> 
    {{myCtrl.currentText}} 
</div> 

它的工作原理。

但是现在我希望文本在五秒中的第一秒淡出，并且希望文本在五秒钟的最后时间内淡出。什么是实现这一目标的最佳方式？

Answer 1

1. 你可以做fadeIn/fadeOut使用jQuery。你需要访问元素，所以在链接函数中做一个简单的指令，你可以访问元素和$ scope。因为这些事件会在Angular的摘要循环之外开始和结束，所以您需要运行$ scope。$ apply来更改文本。

2. 您可以更改控制器内可以管理的不透明度。 Example

3. 您可以创建两个CSS animations一个衰落，一个淡出并完成这些步骤：

   1. 容器最初是隐藏
   2. 选择下一个文本
   3. 应用淡入CSS动画
   4. 等待$ timeout为相同（或更长一点）期间
   5. 应用淡出CSS动画
   6. 等待与同一$超时（或更长的时间）期间，从第2步

随着最后解决方案的问题

重复的是，动画和文字变化是由两个处理不同的计时器，一个是Angular的$ timeout（文本更改），另一个是浏览器的渲染器（CSS动画）。