ngFor在Angular 7中具有Hammer JS滑动功能

Question

使用Hammer js函数时，在angular中使用*ngFor。预期的结果是滑动磁贴的特定索引，该磁贴将被删除。但是通过这样做，动画现在不起作用了。我所做的代码在下面的链接中：

https://stackblitz.com/edit/angular-animations-lib-demo-ahykzr?file=src%2Fapp%2Fapp.component.html

Answer 1

Arjun，您使用一个唯一的变量来控制动画，这是针对您拥有的所有div

[@cardAnimator]="animationState" 

因此，当更改变量时，所有div都将设置动画。

您需要使用变量数组

将animationState声明为字符串数组

animationState: string[]=[];

En-startAnimation和resetAnimation使用数组

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] = '';
}

在.html中也使用数组

[@cardAnimator]="animationState[i]" 
(@cardAnimator.done)="resetAnimationState(i)"

查看您的分叉堆叠式

更新我更改cardAnimator.done以将索引作为参数传递，这样我就可以忘记"丑陋的"；asd可变