Onsen-UI - ons-tabbar page transition

Question

I'm using ons-tabbar for app navigation, is there any "out of the box" page transition I could specify, i.e "slide in from right", when navigating tabs, or any "best practice?

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

score 4 · Accepted Answer · answered Jul 21 '14 at 22:25

solved it like this:

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

Will work for pages with a root element.

For regular pages: <ons-page>

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

Mix them

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

score 1 · Answer 2 · answered Dec 30 '14 at 12:57

Simply add animation attribute on Tabbar as below

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

based on documentation valid values are only "none" and "fade"

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

score 0 · Answer 3 · answered Jul 13 '17 at 08:50

I know this questions is super old, buuuut anyways :)

With OnsenUI v2 there's an animation-options attribute that accepts an object that should look somewhat familiar if you know any CSS:

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

Current docs for JS: https://onsen.io/v2/api/js/ons-tabbar.html#attributes

Onsen-UI - ons-tabbar page transition

3 Answers3