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

```

Accepted Answer

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

Onsen-UI - ons-tabbar page transition

Solution

Problem