Arjun, you use an unique variable to control the animations, that's for all the div you has
[@cardAnimator]="animationState"
So, when change the variable all the div are animated.
You need use an array of variables
declare animationState as an array of strings
animationState: string[]=[];
En startAnimation and resetAnimation use the array
startAnimation(state,index) {
console.log(state)
console.log(index)
this.asd = index;
if (!this.animationState[index]) {
this.animationState[index] = state;
}
}
resetAnimationState(index) {
this.animationState[index] = '';
}
And in .html use also the array
[@cardAnimator]="animationState[i]"
(@cardAnimator.done)="resetAnimationState(i)"
See in your forked stackblitz
Update I change cardAnimator.done to pass as argument the index, so I can forget the "ugly" asd
variable