I'm currently trying to make a slide-up animation, similar to an iPhone modal controller, where the new page slides up over the existing page. However, in my current implementation, the existing page actually flashes to fully visible (above the new page) just before the transition is complete and it looks *really, really bad*. Here's a demonstration: http://plnkr.co/VSp6OGgTqDF6gFwUuanT
As far as I can diagnose, this is because the ngAnimate service actually removes the "ng-enter" class from the new page *before* it removes the old page's element (which now has "ng-leave"). Since both "ng-leave" and "ng-enter" are set to "position: absolute", the moment that "ng-enter" is removed, the "ng-leave" element floats on top of it (because "position: absolute" always appears above "position: static"). To me, this seems like a design flaw in the animation system because it assumes that "ng-leave" will always be completely invisible at the end of a transition. My current workaround is to also add "opacity: 0" to "ng-leave-active" so that the old view fades out as the new one comes in, but it's not exactly the effect I was going for and I'd like to remove that fade out effect if possible. -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/groups/opt_out.
