Hammer.js 在 Angular 中向左滑動手勢 animation

Question

當用戶在設備中向左滑動時，我正在嘗試滑動 animation。

這是問題的要點

• 當我單擊Home中的關於頁面按鈕時，應用程序會順利導航到About頁面。
• 當我點擊About頁面頂部欄中的后退圖標按鈕時，它會向后滑動 animation。

我已經實現了 Hammer.js 向左滑動手勢返回，但它沒有顯示任何 animation 作為后退按鈕 animation。 我怎么能做到這一點？

我使用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實現了這個。

這是工作示例。 從大約頁面從左向右滑動，它會產生一個平滑的 animation 並從您那里返回頁面。

滑動手勢Animation

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);
  }

animation 的結果