StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POng-animate : conditionally switching "back" transition (BUG?)
text
Body
copied!<p><strong>Hi everyone,</strong></p> <p>reading through <a href="https://groups.google.com/forum/#!topic/angular/GzsaiWIGy-I" rel="nofollow">this google group</a> and the fiddles and blogpost linked from there, I managed to get page transitions working with ng-animate.</p> <p><strong>Here's<a href="http://jsfiddle.net/robro/Xck5Z/" rel="nofollow"> my Fiddle</a></strong></p> <pre><code>the fiddle is nicely commented, please let me know if anything's unclear </code></pre> <p>By setting a 'transitionClass' (either .LR or .RL) on the ng-view I was able to trigger different css-transitions for every view change.</p> <p>Now, what I want to do, is manually applying a "back" transition in case of changing the view one step back, no matter whether that step back is caused by a link within the app or the browser's back button.</p> <p>To do so, within app.run(), I'm listening for $locationChangeStart, saving the current url slug and then checking against it on the next $locationChangeStart to determine whether we're going back one page. If that's the case, the "back" transition is applied.</p> <p><strong>This works pretty well, except for...</strong></p> <p>The entering page (.page-enter, .page-enter-active) is transitioning as expected, while the leaving page (.page-leave, .page-leave-active) seems to be stuck on the previously used transition.</p> <p>I'd expect, setting a transitionClass 'LR' on the ng-view, that both pages, entering and leaving, use the css transition for '.LR page-enter' and 'LR page-leave'.</p> <p>What seems to happen instead: If the transitionClass was 'ANY' before, the ng-animate will use '.LR page-enter' for the entering page and '.ANY page-leave' for the leaving page.</p> <p><strong>Reproducing the 'bug':</strong></p> <p>App starts on Page 1. Go from 1 to 2. Now go from 2 to 3, this transition is broken. Go from 3 to 1, this transition works as expected. <em>Both transitions are 'RL' (Right To Left), so they should look the same.</em> The only difference being that page 2 enters 'LR' while page 3 enters 'RL'. So, actually, page 1 will use the '.enter-active' transition that was originally set for page 3 when changing from 2 to 3.</p> <p><strong>Is this the expected behavior?</strong></p> <p>I'm majorly confuzzled right now, but only working with angular for the last week or so and ng-animate being relatively new feature I might very well be missing something. So before reporting a bug or anything I'd welcome any input on this. </p> <p><strong>Thanks!</strong></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload