Running an AngularJS web application that showcases three words for 5 seconds each: Hello, World & Goodbye.
The controller setup is as follows:
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 avoid memory leaks
$scope.$on('destroy', function() {
$interval.cancel(currentInterval);
currentInterval = undefined;
});
Here's a snippet of the Angular Template:
<div ng-controller="MyCtrl as myCtrl">
{{myCtrl.currentText}}
</div>
The functionality works as expected.
Now, the goal is to implement text fading in over the first second and fading out during the last second of the five-second display. How can this be achieved effectively?