how to manage routes and Slides effect together in ionic?

Question

how to manage routes and Slides effect together in ionic?

how can we manage routes and slides together in ionic Framework.? I mean that i have a page where three buttons are available i want that as user click on button new route\view show on same page but with effect of slide. The main question is how to manage routing + slides together, slides effect on route change

this is the three button code on index page

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

this will show view on same index page

 <ui-view></ui-view>

but i want that as user click on button a new route will load on same page but with slide effect

routes
slide
ionic-framework

Answer 1

You can provide animation effect in css class, something like below

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