Angular 7 中带有 Hammer JS 滑动功能的 ngFor
ngFor with Hammer JS swipe function in Angular 7
虽然在 angular.The 中使用带有 *ngFor 的 Hammer js 滑动功能,但预期结果是针对图块的特定索引进行滑动,并且该图块将被删除。但是通过这样做,动画现在不起作用。我完成的代码在下面 link:
https://stackblitz.com/edit/angular-animations-lib-demo-ahykzr?file=src%2Fapp%2Fapp.component.html
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)"
Update 我更改 cardAnimator.done 以将索引作为参数传递,这样我就可以忘记“丑陋的”asd
变量
虽然在 angular.The 中使用带有 *ngFor 的 Hammer js 滑动功能,但预期结果是针对图块的特定索引进行滑动,并且该图块将被删除。但是通过这样做,动画现在不起作用。我完成的代码在下面 link:
https://stackblitz.com/edit/angular-animations-lib-demo-ahykzr?file=src%2Fapp%2Fapp.component.html
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)"
Update 我更改 cardAnimator.done 以将索引作为参数传递,这样我就可以忘记“丑陋的”asd
变量