javascript - ionic 避免 View 标题在 Android 上闪烁

Question

我正在尝试按照 ionic 模板示例所建议的“标准”方式来制作选项卡内容页面。

但是，我发现在Android中切换标签时，view-title会闪烁。您不会在 iOS 或桌面浏览器上看到闪烁。但是，如果您将 Chrome 中的设备模式切换到 Android 设备，您会看到闪烁。

我怎样才能克服它？

菜单.html

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-positive">
      <h1 class="title">Left</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close href="#/app/tab/content1">
          Tab 1 Content 1
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

标签.html

<ion-tabs class="tabs-striped tabs-top tabs-background-positive tabs-color-light">

  <ion-tab title="Content1" href="#/app/tab/content1">
    <ion-nav-view name="tab-Content"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Content2" href="#/app/tab/content2">
    <ion-nav-view name="tab-Content2"></ion-nav-view>
  </ion-tab>

</ion-tabs>

content1.html

<ion-view view-title="Bookmarks">
  <ion-content>
    <h1>Content 1</h1>
  </ion-content>
</ion-view>

content2.html

<ion-view view-title="Bookmarks">
  <ion-content>
    <h1>Content 2</h1>
  </ion-content>
</ion-view>

Answer 1

感谢@AndresRehn 分享链接 (http://forum.ionicframework.com/t/ionic-view-transition-flickering/27441)。通过在 CSS 中添加以下内容，可以轻松解决 android 上的标题闪烁问题。

/*
    CSS styles to eliminate the annoying flickering header when changing tabs in an Ionic app on Android:
    http://forum.ionicframework.com/t/flickering-when-navigating-via-tabs-on-android/27281/2
*/
.platform-android .header-item.title {
    transition-duration: 0ms;
}
.platform-android .header-item.buttons {
    transition-duration: 0ms;
}