Search code examples
onsen-ui

Onsen-UI - ons-tabbar page transition


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>

Solution

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