Question

我使用ons-tabbar进行应用导航，是否有任何＆＃34;开箱即用＆＃34;页面转换我可以指定，即＆＃34;从右边滑入＆＃34;，导航标签或任何＆＃34;最佳做法？

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

Answer 2

只需在Tabbar上添加动画属性，如下所示

<ons-tabbar animation="fade">
    <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>

基于文档有效值仅为＆＃34;无＆＃34;和＆＃34;淡出＆＃34;

http://onsen.io/guide/components.html#ons-tabbar

Answer 3

我知道这些问题非常古老，反正buuuut：）

使用OnsenUI v2，有一个animation-options属性，如果你知道任何CSS，它会接受一个看起来有点熟悉的对象：

<ons-tabbar position="top | bottom | auto" animation="fade | slide | none" animation-options="{duration: 0.6, delay: 0, timing: 'ease-out'}">

JS的当前文档：https://onsen.io/v2/api/js/ons-tabbar.html#attributes

Onsen-UI - ons-tabbar页面转换

3 个答案: