如何在离子中管理路线和幻灯片效果？

Question

我们如何在离子框架中一起管理路线和slides。 我的意思是我有一个页面，其中有三个按钮可用我希望当用户点击按钮新路线\视图显示在同一页面上，但有幻灯片的效果。 主要问题是如何一起管理路线+幻灯片，幻灯片对路线变化的影响

这是索引页上的三个按钮代码

 <div class="col">
            <div class="button-bar">
              <a class="button" ui-sref="app.home.tabs({name: 'ib'})" ui-sref-active="active">Ib</a>
              <a class="button" ui-sref="app.home.tabs({name: 'sr'})" ui-sref-active="active">Sr</a>
              <a class="button" ui-sref="app.home.tabs({name: 'komunitas'})" ui-sref-active="active">Ks</a>
            </div>
          </div>
        </div>

这将在同一索引页上显示视图

 <ui-view></ui-view>

但我希望当用户点击按钮时，新路线会在同一页面上加载但具有幻灯片效果

Answer 1

您可以在css类中提供动画效果，如下所示

 -webkit-animation: slideInFromLeft .5s, fadeIn .5s;
    -moz-animation: slideInFromLeft .5s, fadeIn .5s;
    animation: slideInFromLeft .5s, fadeIn .5s;