Page transitions possible without tabs?

ionic-v1
1

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

Thanks,
Damien

2

Can you post an example, Codepen or Plunker?

3

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?

1 Like
4

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 http://plnkr.co/edit/7vkXFtN9OlXCllzBdsKr?p=preview
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” http://omnipotent.net/jquery.sparkline

5

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? http://codepen.io/anon/pen/padmG

6

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!