ionic-team / ionic-team/ionic-framework

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

Đang mở
#30,897 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
triage
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

### 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_

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.