After implementing a service for my data, the animations on my page suddenly stopped working. It seems that the issue arises from the fact that when the page first loads, there are no elements in the ng-repeat due to the data being fetched. This situation bears some resemblance to THIS and THIS:
Encountered Error:
ERROR Error: Unable to process animations due to the following failed trigger transitions @listAnimation has failed due to:
- `query(":enter")` returned zero elements. (Use `query(":enter", { optional: true })` if you wish to allow this.)
Animation Code:
trigger('listAnimation', [
transition('* => *', [
query(':enter', style({ opacity: 0}), { optional: true }),
query(':enter', stagger('150ms', [
animate('.5s ease-in', keyframes([
style({ opacity: 0, /*transform: 'translateY(-75px)',*/ offest: 0}),
style({ opacity: .5, /*transform: 'translateY(35px)',*/ offest: .3}),
style({ opacity: 1, /*transform: 'translateY(0px)',*/ offest: 1})
]))
]))
])
])
HTML Structure:
<div [@listAnimation]>
<div *ngFor="let member of members" class="member-card">
member info goes here...
</div>
</div>
Even after adding { optional: true } as suggested by the error message, the animation remains nonfunctional though the error disappears:
trigger('listAnimation', [
transition('* => *', [
query(':enter', style({ opacity: 0}), { optional: true }),
query(':enter', stagger('150ms', [
animate('.5s ease-in', keyframes([
style({ opacity: 0, /*transform: 'translateY(-75px)',*/ offest: 0}),
style({ opacity: .5, /*transform: 'translateY(35px)',*/ offest: .3}),
style({ opacity: 1, /*transform: 'translateY(0px)',*/ offest: 1})
]))
]), {optional: true})
])
])
This setup was functioning well until I moved the data out of the app component. Although the data is accessible and the app operates normally, the animation no longer functions.