ngFor with Hammer JS swipe function in Angular 7

孤人 提交于 2021-02-11 12:50:34

问题


While using Hammer js swipe function with *ngFor in angular.The result expected was a swipe for particular index of tile and that tile will be removed. But by doing that the animation is not working now. the code which i have done is in below link:

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


回答1:


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



来源:https://stackoverflow.com/questions/63446167/ngfor-with-hammer-js-swipe-function-in-angular-7

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!