Question

我有一个AngularJS网络应用程序，在屏幕上闪烁3个单词，每个屏幕上闪烁5秒：Hello，World＆amp; 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

您可以使用jQuery执行fadeIn / fadeOut。您需要访问该元素，因此在链接函数中可以更简单地执行一个指令，您可以访问该元素和$ scope。因为这些事件会在Angular的摘要循环之外开始和结束，所以你需要运行$ scope。$ apply来更改文本。
您可以更改控制器中可以管理的不透明度。 Example
您可以创建两个CSS animations一个用于淡入，一个用于淡出并执行以下步骤：
1. 最初隐藏容器
2. 选择下一个文字
3. 应用淡入式CSS动画
4. 等待$ timeout超过相同（或更长一点）的时间
5. 应用淡出CSS动画
6. 等待$ timeout超过相同（或更长一点）的时间
7. 从第2步开始重复

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

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

1 个答案: