3

我正在使用 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>
4

3 回答 3

4

像这样解决它：

.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;
}
于 2014-07-21T22:25:26.393 回答
1

只需在 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>

根据文档有效值只有“none”和“fade”

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

于 2014-12-30T12:57:25.733 回答
0

我知道这个问题已经很老了，无论如何 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

于 2017-07-13T08:50:31.197 回答