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

我有一个AngularJS web应用程序，它在屏幕上闪烁3个单词，每个单词在屏幕上闪烁5秒钟：

你好

，

世界

&

再见

这是我的控制器：

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>

{{myCtrl.currentText}

它起作用了

但是现在我希望文本在五秒钟的第一秒淡入，在五秒钟的最后一秒淡出。实现这一目标的最佳方式是什么

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

您可以更改可以在控制器内管理的不透明度

您可以创建两个，一个用于淡入，一个用于淡出，然后执行以下步骤：

容器最初是隐藏的

选择下一个文本

在CSS动画中应用淡入淡出

使用$timeout等待相同（或稍长一点）的时间

应用淡出CSS动画

使用$timeout等待相同（或稍长一点）的时间

重复步骤2

最后一种解决方案的问题是，动画和文本更改由两个不同的计时器处理，一个是Angular的$timeout（文本更改），另一个是浏览器的渲染器（CSS动画）。

是。我选择了选项#2.：）