Ionic2 iOS переходы блокировки нажмите или нажмите на второй

Question

У меня проблема с Ionic2 Окончательное поведение постукивания на iOS.

После перехода на страницу нажатие или щелчок на карте не работает в течение 1-2 секунд, поэтому пользователю нужно дважды нажать или дважды щелкнуть (или подождать несколько секунд, прежде чем нажимать). Я уже пытался использовать <a> внутри карты, вместо того, чтобы напрямую прикреплять клик к карте. Я также пробовал (click), (tap), [navpush], и я попытался добавить tappable к карте.

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

На Android он отлично работает.

После долгих проб и ошибок я «фиксированный» этот вопрос с помощью андроид переходов:

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

Таким образом, проблема, как представляется, переход IOS. Любая идея, как это исправить? У кого-то такая же проблема? У меня также есть проблемы с опрокидыванием на Back очень короткий после перехода или с закрытием бокового меню. Однако они не так легко воспроизводятся.

IOS 10.1.1 на iPhone 6S

Answer 1

Проблема, кажется, фактическая анимация используется для перехода. Вы можете решить эту проблему, отрегулировав время (и ослабление) анимации при нажатии на navCtrl. Вы делаете это, предоставляя необязательный объект опции в качестве последнего параметра.

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

Объяснение следует ...

оригинальный настройка анимации 500 мс, который слишком долго. Однако фактическая визуальная анимация на самом деле не выглядит так долго, поскольку кривая кубического безье в исходной анимации очень плоская в последние 200-300 мсек (что видно на рисунке ниже).

Именно поэтому ослабление должно быть также изменено.

Оригинал: кубический Безье (0.36,0.66, 0.04 , 1) изменено на: кубический Безье (0.36,0.66, 0,9, 1)

Для того, чтобы сделать приложение быть быстрым при навигации назад, а также ту же анимацию, которая должна быть добавлена ​​при нажатии кнопки «Назад» в представлении. Это можно сделать, переопределив поведение кнопки обратной панели NavBar.

Так добавить к вашей странице компонента

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

Для тех, кто строит источник (или хочет, чтобы обеспечить запрос тянуть к команде Ионные). Исходные значения устанавливаются в ИО-transition.ts и должны быть изменены там

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

EDIT: Я подал заявку на тянущую к команде Ионных https://github.com/ionic-team/ionic/pull/13029