Hammer.js 在 Angular 中向左滑动手势动画

Posted 2023-05-09

【中文标题】Hammer.js 在 Angular 中向左滑动手势动画

【英文标题】：Hammer.js swipe left gesture animation in Angular

【发布时间】：2020-11-17 07:13:10

【问题描述】：

当用户在设备中向左滑动时，我正在尝试制作滑动动画。

这是问题的要点

当我点击Home页面中的关于页面按钮时，应用程序顺利导航到About页面。 当我点击About 页面顶部栏中的后退图标按钮时，它会显示后退动画。

我已经实现了 Hammer.js swipe left gesture 用于返回，但它没有像返回按钮动画那样显示任何动画。我怎样才能做到这一点？

我使用StackBlitz 创建了一个工作示例，以更好地解释问题。有人可以帮忙吗？

HTML

<ion-content (swipeleft)="goBack()">
  <h2>About page</h2>
</ion-content>

TS

export class AboutPage implements OnInit 
  constructor(private location: Location) 

  ngOnInit() 

  goBack() 
    this.location.back();
  

【参考方案1】：

最后，我使用Ionic Gestures 实现了这个。

这是working example。从about页面从左向右滑动，将产生流畅的动画并从您那里返回页面。

滑动手势动画

async ngAfterViewInit() 
    let gesture = await this.gestureCtrl.create(
      el: this.aboutPage.nativeElement,
      gestureName: 'swipe-left',
      gesturePriority: 100,
      threshold: 5,
      passive: false,
      onStart: () => 
        this.renderer.setStyle(
          this.aboutPage.nativeElement,
          'transition',
          'none'
        );
      ,
      onMove: (ev) => 
        if (ev.deltaX > 0) 
          this.renderer.setStyle(
            this.aboutPage.nativeElement,
            'transform',
            `translateX($ev.deltaXpx)`
          );
        
      ,
      onEnd: (ev) => 
        this.renderer.setStyle(
          this.aboutPage.nativeElement,
          'transition',
          '0.4s ease-out'
        );
        if (ev.deltaX > 100) 
          this.renderer.setStyle(
            this.aboutPage.nativeElement,
            'transform',
            'translateX(400px)'
          );
          this.location.back();
        
        if (ev.deltaX < 100) 
          this.renderer.setStyle(
            this.aboutPage.nativeElement,
            'transform',
            'translateX(0px)'
          );
        
      ,
    );
    gesture.enable(true);
  

动画结果