-1

I want different texts to appear on the screen for a couple of seconds and disappear again. Each text should be displayed after the other and it should be done automatically.

At the moment the Welcome text fades in and out as it should be but right after it fades out it will be displayed again which should not be the case. Also, I do not know how to separate the animations so that the next text is shown after the first one and so on.

here is the code sample: https://stackblitz.com/edit/angular-vptfmh

SonnyBl
  • 61
  • 2
  • 6

1 Answers1

1

it is not recommended to use animations for main logic. In your case, animation are used to choose which element is visible. the more suitable solution would be to define which string is visible by component logic, and then use animations just to animate transitions. For example like this: https://stackblitz.com/edit/angular-lhslyk?file=src%2Fapp%2Fapp.component.ts It also could be that you was looking for https://angular.io/api/animations/stagger

Andrei
  • 10,117
  • 13
  • 21
  • thanks! can I use something different to the setinterval() function? I only want to display the elements once and not in a loop. Or is this possible with clearinterval()? Appreciate your help! – SonnyBl Feb 19 '19 at 15:56
  • it is possible. just clearInterval after the third callback execution. The other way to implement it to use rxjs for example like this `timer(1000, 1000).pipe(take(3)).subscribe(() => this.messageShownIndex++)` it will increase the index only 3 times, and, as a result, no message will be shown after – Andrei Feb 20 '19 at 07:34
  • can you show me in the code where to put the clearInterval function? – SonnyBl Feb 20 '19 at 09:35