Ionic2 iOS transitions lock click or click on second

Question

I have a problem with Ionic2 Final when clicking on iOS.

After going to the page, clicking or clicking on the map does not work for 1-2 seconds, so the user needs to double-click or double-click (or wait a few seconds before clicking). I already tried using <a> inside the map, instead of directly attaching a click to the map. I also tried (click), (tap), [navpush] , and I tried adding tappable to the map.

 <ion-content padding class="modules card-background-page"> <ion-card class="module-card" *ngFor="let module of modules"> <a (tap)="tapEvent($event)" (click)="clickEvent($event)" [navPush]="modulePage" [navParams]="{id: module.id}" > <img src="{{module.thumbnail}}"/> <div class="card-content"> <div class="card-title"> <strong>Module {{module.number}}</strong> </div> <div class="card-subtitle"> <strong *ngIf="translate.currentLang!='fr'">{{module.subtitle_en}}</strong> <strong *ngIf="translate.currentLang=='fr'">{{module.subtitle_fr}}</strong> </div> </div> </a> </ion-card> </ion-content> 

It works great on Android.

After a lot of trial and error, I “fixed” this problem using android transitions:

  IonicModule.forRoot(MyApp, { pageTransition: 'md-transition' }), 

So the problem is the iOS transition. Any idea how to fix this? Does anyone have the same problem? I also have problems tipping over to Back very short after going over or closing the side menu. They are not so easy to reproduce, though.

iOS 10.1.1 on iPhone 6S

Answer 1

The problem is the actual animation used for the transition. You can solve this problem by adjusting the time (and attenuation) of the animation when you click on navCtrl. You do this by providing an optional option object as the last parameter.

 this.navCtrl.push('MyPage', null, { duration: 200, easing: 'cubic-bezier(0.36,0.66,0.9,1)' }); 

Explanation follows ...

The initial animation setting is 500 ms, which is too long. However, the actual visual animation doesn’t really look so long, because the cubic bezier curve in the original animation is very flat in the last 200-300 ms (as can be seen in the picture below).

That is why it is also necessary to change the attenuation.

Original: Bezier cube (0.36.0.66, 0.04 , 1) Changed: cubic Bezier (0.36.0.66, 0.9 , 1)

For the application to be fast when navigating back, you need to add the same animation when the back button is pressed in the view. This can be done by overriding the behavior of the NavBar feedback button.

So add this to your page component

 @ViewChild(Navbar) navBar: Navbar; ionViewDidLoad() { this.setBackButtonAction() } //Method that overrides the default back button action setBackButtonAction() { this.navBar.backButtonClick = () => { this.navCtrl.pop({ duration: 200, easing: 'cubic-bezier(0.36,0.66,0.9,1)' }); } } 

For someone building a source (or wanting to provide a pull request for the Ionic team). The initial values ​​are set in ios-transition.ts and must be changed there

 const DURATION = 500; const EASING = 'cubic-bezier(0.36,0.66,0.04,1)'; 

EDIT: I sent a request to output the Ionic command https://github.com/ionic-team/ionic/pull/13029