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