Ionic2 iOS过渡阻止点击或点击一秒钟

Question

我在iOS上遇到了Ionic2 Final点击行为的问题.

页面转换后,点击或点击卡片不会工作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上它工作正常.

经过大量的试验和错误,我通过使用android转换"修复"了这个问题:

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

所以问题似乎是iOS过渡.知道如何真正解决这个问题吗？有人有同样的问题吗？转换后或关闭侧面菜单时,我也有很小的问题.但这些并不是那么容易复制的.

iPhone 6S上的iOS 10.1.1

Answer 1

问题似乎是用于过渡的实际动画。您可以通过在按下 navCtrl 时调整动画的时间（和缓动）来解决此问题。您可以通过提供可选选项对象作为最后一个参数来实现此目的。

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

解释如下...

原始动画设置为 500 毫秒，这太长了。然而，实际的视觉动画实际上并不需要那么长的时间，因为原始动画的三次贝塞尔曲线在最后 200-300 毫秒非常平坦（如下图所示）。

这就是为什么宽松政策也必须改变。

原：cubic-bezier(0.36,0.66, 0.04 ,1) 修改为：cubic-bezier(0.36,0.66, 0.9 ,1)

为了使应用程序在向后导航时也能快速运行，必须在视图中按下后退按钮时添加相同的动画。这可以通过覆盖导航栏的后退按钮行为来完成。

因此，将其添加到您的页面组件中

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

对于构建源代码的任何人（或想要向 Ionic 团队提供拉取请求）。原始值在 ios-transition.ts 中设置，应该在那里更改

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

编辑：我已向 Ionic 团队提交了拉取请求https://github.com/ionic-team/ionic/pull/13029