Onsen-UI - ons-tabbar 页面转换

Question

我正在使用ons-tabbar进行应用程序导航，是否有任何我可以指定的“开箱即用”页面转换，即导航选项卡时“从右侧滑入”，或任何“最佳实践？” >

<ons-tabbar>
    <ons-tabbar-item
          active="true"
          label="Home"
          icon="home"
          page="navigator1.html"></ons-tabbar-item>
    <ons-tabbar-item
          label="Create Item"
          icon="plus"
          page="navigator2.html"></ons-tabbar-item>
    <ons-tabbar-item
          label="View Items"
          icon="fa-lightbulb-o"
          page="browse.html"></ons-tabbar-item>
    <ons-tabbar-item
          label="Settings"
          icon="gear"
          page="page3.html"></ons-tabbar-item>
</ons-tabbar>

Answer 1

这样解决:

.topcoat-page__bg {
    -webkit-animation: pageleftright .25s;
    animation: pageleftright .25s;
}

@-webkit-keyframes pageleftright {
    from {left: 100%;}
    to {left: 0;}
}

@keyframes pageleftright {
    from {left: 100%;}
    to {left: 0;}
}

适用于具有根元素的页面。

对于常规页面:<ons-page>

.page {
    -webkit-animation: pageleftright .25s;
    animation: pageleftright .25s;
}

混合它们

.page, .topcoat-page__bg {
    -webkit-animation: pageleftright .25s;
    animation: pageleftright .25s;
}