In my component, there are two elements that utilize the same fade animation. Only one element is visible on screen at a time, controlled by *ngIf directives for visibility management. The animation is a simple fade in/fade out effect.
When the state of my component changes in a specific manner, the *ngIf conditions toggle, causing one element to be removed while another is added. Below is the animation code:
animations: [
trigger('fade', [
state('in', style({ opacity: 1, transform: 'rotateX(0deg)' })),
transition(':enter', [style({ opacity: 0, transform: 'rotateX(90deg)' }), animate('0.2s')]),
transition(':leave', [style({ opacity: 1, transform: 'rotateX(0deg)' }), animate('0.2s')])
])
]Here are the two elements within my component template:
<div @fade *ngIf="isErrorState" id="error-message" class="status-message">
<div class="message">Oops! We encountered an error while processing your signup. Please try again.</div>
</div>
<div @fade *ngIf="isLoadingState" id="loading-message" class="status-message">
<div class="spinner-container">
<app-spinner></app-spinner>
</div>
<div class="message">We're processing your signup, hang on...</div>
</div>
The issue I'm facing is that both elements begin their animations simultaneously, resulting in both being displayed on screen together. Is there a method to sequence the animations so that one doesn't start fading in until the other has finished fading out?