bar - Ionic2 iOS transitions bloqueando toque o haga clic por un segundo

searchbar ionic 3

Question

Tengo un problema con el comportamiento de tapping final de Ionic2 en iOS.

Después de una transición de página, un toque o hacer clic en una tarjeta no funciona durante 1-2 segundos, por lo que el usuario tiene que tocar o hacer clic dos veces (o esperar un momento antes de hacer clic). Ya traté de usar <a> dentro de la tarjeta en lugar de adjuntar el clic a la tarjeta directamente. También probé (click), (tap), [navpush] e intenté agregar tappable a la tarjeta.

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

En Android funciona bien.

Después de muchas pruebas y errores, "solucioné" este problema al usar las transiciones de Android:

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

Entonces, el problema parece ser la transición de iOS. ¿Alguna idea de cómo arreglar esto realmente? ¿Alguien tiene el mismo problema? También tengo problemas para inclinar la espalda muy poco después de la transición o al cerrar un menú lateral. Sin embargo, estos no son tan fáciles de replicar.

iOS 10.1.1 en iPhone 6S

Answer 1

El problema parece ser la animación real utilizada para la transición. Puede resolver esto ajustando el tiempo (y la aceleración) de la animación al hacer un push al navCtrl. Para ello, proporcione un objeto de opción opcional como último parámetro.

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

La explicación sigue ...

La configuración de animación original es de 500 ms, que es demasiado larga. Sin embargo, la animación visual real no parece tomar tanto tiempo, ya que la curva cúbica-bezier de la animación original es muy plana en los últimos 200-300ms (que se puede ver en la imagen a continuación).

Es por eso que la flexibilización tiene que ser cambiada también.

Original: cubic-bezier (0.36,0.66, 0.04 , 1) Cambiado a: cubic-bezier (0.36,0.66, 0.9 , 1)

Para hacer que la aplicación sea rápida cuando se navega hacia atrás, también se debe agregar la misma animación cuando se presiona el botón Atrás en la vista. Esto puede hacerse anulando el comportamiento del botón de retroceso de NavBar.

Así que agrega esto a tu componente de página

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

Para cualquiera que cree la fuente (o quiera proporcionar una solicitud de extracción al equipo Ionic). Los valores originales se establecen en ios-transition.ts y se deben cambiar allí

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

EDITAR: He enviado una solicitud de extracción al equipo de Ionic https://github.com/ionic-team/ionic/pull/13029