ionic-team / ionic-team/ionic-framework

feat: add progress/delta event to ion-router-outlet swipe-to-go-back gesture

オープン
#30,897 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
triage
主要言語
TypeScript
スター
52.7k
フォーク
13.3k
平均マージ
1日 15時間
マージ済み PR(30日)
51

説明

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.

### Describe the Feature Request

Currently, in Ionic 8, there is no native way to synchronize UI elements (like a global bottom **ion-tab-bar** or custom floating buttons) with the interactive "**swipe-to-go-back**" gesture. On iOS, when a user swipes back from a page that has no bottom bar to a previous page that does (or vice versa), the transition is abrupt. There is no hook to listen to the deltaX or progress (0 to 1) of the swipe to animate these elements proportionally.
Describe the solution you'd like
I would like **IonRouterOutlet** (or a global config) to provide an **Observable** or Event Listener that emits real-time data during a navigation gesture.
Ideally, it would emit an object such as:

```
interface SwipeBackProgress {
state: 'start' | 'moving' | 'end' | 'cancelled';
progress: number; // 0 to 1
deltaX: number;
}
```

### Describe the Use Case

Many modern apps (like Instagram or Spotify) hide or transform global UI elements (like the music player bar or tabs) in sync with the swipe-back gesture. In Ionic, because the ion-tab-bar often lives outside the ion-router-outlet, it remains static while the page content slides, breaking the native "stack" illusion.

### Describe Preferred Solution

Providing a swipeProgress emitter would allow developers to do things like:

```
this.routerOutlet.swipeProgress$.subscribe(ev => {
this.bottomBar.style.transform = `translateY(${ev.progress * 100}%)`;
});
```

### Describe Alternatives

**Manual GestureController**: Creating a custom GestureController on every page to track the edge swipe. This is redundant as it conflicts with Ionic’s internal gesture and is difficult to maintain.

**MutationObserver**: Watching for .ion-page-hidden class changes. This only tells us when a swipe starts, not the size or progress of the swipe.

**Global CSS**: Using CSS transitions, which do not track the user's finger, resulting in a non-native "rubber-banding" feel.

### Related Code

_No response_

### Additional Information

_No response_

コントリビューションガイド

コントリビューションガイドを開く

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。