Quiero que una animación suceda solo una vez en una aplicación angular que estoy construyendo. Entonces, al cargar la página por primera vez, anime una vez. Si la persona va a otra página (ruta) dentro de la aplicación y vuelve a esta página inicial, la animación no debería volver a ocurrir.

 @Component({ selector: 'app-front-blocks', templateUrl: './front-blocks.component.html', styleUrls: ['./front-blocks.component.scss'], animations: [ // Trigger animation cards array trigger('cardAnimation', [ // Transition from any state to any state transition('* => *', [ // Initially the all cards are not visible query(':enter', style({ opacity: 0 }), { optional: true }), // Each card will appear sequentially with the delay of 300ms query(':enter', stagger('400ms', [ animate('0.8s 4.6s ease', keyframes([ style({ opacity: 0, transform: 'translateY(40px)', offset: 0 }), style({ opacity: .5, transform: 'translateY(20px) scale(1)', offset: 0.3 }), style({ opacity: 1, transform: 'translateY(0)', offset: 1 }), ]))]), { optional: true }), ]), ]), ] })

html:

 <div class="block"> <div class="block-container" [@cardAnimation]="blocks.length"> <div id="block-whole" class="block-whole" *ngFor="let block of blocks" routerLink="/{{ block.link }}" > <div id="block-whole-first" class="block-whole-first" > <img class="image-small" src="{{ block.img }}" alt=""> <img class="image-groot" src="{{ block.imgGroot }}" alt=""> </div> <div id="block-whole-second" class="block-whole-second"> <h4>{{ block.title }}</h4> <img src="assets/arrow-btn-large-right.svg" alt=""> </div> </div> </div> <!-- <ng-lottie class="lottie" [options]="options" (animationCreated)="animationCreated($event)"></ng-lottie> --> </div>