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

Question

我正在尝试在用户向左滑动设备时播放滑动动画。

这是问题的要点

当我点击 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();
  }
}

Answer 1

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

这是working example。从关于页面向左向右滑动，将产生流畅的动画并带回您来自的页面。

滑动手势动画

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.deltaX}px)`
          );
        }
      },
      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);
  }

动画结果

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

Hammer.js swipe left gesture animation in Angular

javascript

hammer.js

ionic-framework

angular

ionic5