Page transitions possible without tabs?


I would like to transition from one view to another and back again, like a navigation controller but without using tabs (which is what the docs use). I tried adding one of these:

  <ion-nav-view animation="slide-left-right"></ion-nav-view>

which successfully holds my ion-views one at a time. But there is no transition animation; it just jumps. Is this supported? Or should I try to use tabs (but hide the actual tab buttons)?



Can you post an example, Codepen or Plunker?


What Ionic version are you using? I seem to recall that animations for state changes were broken for a short while - maybe in 0.9.25?


I’m using the nightly, but now I realize that the problem only happens when I include jQuery. (tried the latest v1.x and 2.x)

For example
An overly complex example, but you can see that as long as jquery is included the link “jumps” to the next page (whereupon the back link jumps back).

I guess personally I’m ok with this because I was planning to remove jquery anyway. The only reason I’m using it is b/c of the cool plugin “sparklines”


I’ve also seen the issue with transition animations stopping if jquery is included. I wasn’t sure if it was an angular issue or ionic specific so never raised it.

To work around I changed jQuery to load after angular etc and then called jQuery.noCoflict(); I’ve since replaced the plugin with one that didn’t require jQuery so forgot all about it.

Here is a pen confirming the issue still exists in 0.9.26 it’s the standard tabs navigation example with jquery included. Transition between pages no longer animate. Interestingly the header does animate though?


It looks like now you can just have jquery to load after Angular and that fixes the issue, no need for noConflict(). That works when in your codepen when I move the jquery library loading below angular. Thanks!