Using Angular and Ionic, I have created an app that uses Firebase subscribe methods to retrieve data. I have created an animation that loops through divs repeated in a *ngFor to create a animation delay and use keyframes to change each divs opacity from 0 to .5 to 1.
#neededfoodnames {
animation: fadeIn 0.5s linear;
animation-fill-mode: both;
}
// Set delay per List Item
@for $i from 1 through 100 {
#neededfoodnames:nth-child(#{$i}) {
animation-delay: .25s * $i;
}
}
// Keyframe animation
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
75% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
However, because I am using Firebase's subscribe methods to listen for changes, each time an item is updated, the animation is triggered again for that item.
I'd like this animation to only happen on load and not when a change is made to items.
I have tried using an ngClass based on a boolean. On load I have set the boolean to true to fire the animation but I have also created a setTimeout() method to change the boolean to false after a designated time.
HTML:
<div id="neededfoodnames" *ngFor="let list of lists; let i = index" [ngClass]="{'neededfoodnames':animate == true}">
...
</div>
TypeScript:
export class HomePage {
lists: FirebaseListObservable<any[]>;
animate: boolean;
constructor() {
this.animate = true;
setTimeout(() => {
this.animate = false
}, 4000);
}
}
The CSS was also updated to use neededfoodnames as a class instead of a id.
Using this method, I currently have the setTimeout()'s milliseconds hardcoded. If I continue with this method, I will need to find a way to dynamically set the milliseconds.
I have created an example on Stackblitz of what I'm wanting to achieve, however it is only working because it is not retrieving the data from Firebase.
Is there a better way to trigger this animation only on load and not when data changes? Or is finding and setting the setTimeout()'s milliseconds my best option?
