Onsen-UI - переход страницы на вкладке

Я использую 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>

onsen-ui
person Lars Anundskås    schedule 16.07.2014    source источник

Ответы (3)


arrow_upward
4
arrow_downward

решил это так:

.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;
}
person Lars Anundskås    schedule 21.07.2014

arrow_upward
1
arrow_downward

Просто добавьте атрибут анимации на 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>

на основе документации действительными значениями являются только «нет» и «затухание»

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

person Reza    schedule 30.12.2014

arrow_upward
0
arrow_downward

Я знаю, что эти вопросы очень старые, но в любом случае :)

В 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

person robro    schedule 13.07.2017