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

Question

我有一个 AngularJS 网络应用程序，它在屏幕上闪烁 3 个单词，每个单词在屏幕上显示 5 秒:Hello、World 和 Goodbye。

这是我的 Controller :

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;
});

这是 Angular 模板:

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

它有效。

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

Answer 1

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

2. 您可以更改您可以在 Controller 中管理的不透明度。 Example

3. 您可以创建两个 CSS animations一种用于淡入，一种用于淡出，然后执行以下步骤:

   1. 容器最初是隐藏的
   2. 选择下一个文本
   3. 应用淡入 CSS 动画
   4. 使用 $timeout 等待相同(或更长)的时间
   5. 应用淡出 CSS 动画
   6. 使用 $timeout 等待相同(或更长)的时间
   7. 从第 2 步开始重复

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