ionic-team / ionic-team/ionic-framework

page transition animation starts before ionViewWillLeave when using swipe to go back

Ouverte
#17,600 16 commentaires 18 réactions 0 personnes assignées Voir sur GitHub
package: angular type: bug
Langage dominant
TypeScript
Étoiles
52.7k
Forks
13.3k
Merge moyen
1 j 15 h
PR mergées (30 j)
51

Description

# Bug Report

**Ionic version:**

[x] **4.0.1**

**Current behavior:**

In 4.0.1. ionViewWillLeave does trigger, but is too late when using swipe to go back. In Ionic 3 ionViewWillLeave will trigger before the page transition animation. Now in Ionic 4 it is triggered after the page transition is started. So the user can drag away the current page and then it will stay that way (leaving translateX at 100%). I am using this in conjunction with a CanDeactivateGuard to prevent a user from leaving a page that is being edited.

**Expected behavior:**

When you block the possibility to leave a page on ionViewWillLeave (with a CanDeactivateGuard) and a user swipes to go back, the page transition should not have started, because then the user is still able to swipe away the page.

**Steps to reproduce:**

Create a component that uses CanDeactivateGuard like in the related code. When canLeave is false and you swipe to go back you are still able swipe the page away while the alert is open.

**Related code:**

```
this.canLeave is a boolean indicating the user may not leave:

ionViewWillLeave(){
return this.canDeactivate();
}

async canDeactivate() {
if (!this.canLeave) {
const alert = await this.alertController.create({
header: 'Annuleren?',
message: `Weet je zeker dat je annuleren? Alle wijzigingen gaan hiermee verloren`,
buttons: [{
text: 'Nee'
},
{
text: 'Ja',
handler: () => {
this.canLeave = true;
this.historyBack();
}
}]
});
await alert.present();
}
return this.canLeave;
}
```

**Other information:**

**Ionic info:**

```
Ionic:

ionic (Ionic CLI) : 4.6.0 (/Users/martijnlutgens/.nvm/versions/node/v8.12.0/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.1
@angular-devkit/build-angular : 0.12.4
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.2.4
@ionic/angular-toolkit : 1.4.0

Cordova:

cordova (Cordova CLI) : 6.5.0
Cordova Platforms : android 7.0.0, ios 4.3.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.0.2, (and 6 other plugins)

System:

ios-deploy : 1.9.2
NodeJS : v8.12.0 (/Users/martijnlutgens/.nvm/versions/node/v8.12.0/bin/node)
npm : 6.4.1
OS : macOS Mojave
Xcode : Xcode 10.1 Build version 10B61
```

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Start by reproducing the swipe-back flow with the ionViewWillLeave hook and CanDeactivateGuard, using the Ionic 4.0.1 navigation and page-transition behavior described here. Trace when the guard returns false relative to the transition and historyBack call. Done means a blocked swipe cannot move the page while the alert is open, while an allowed leave still navigates.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend, mobile
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.