during ng-animate of views, “leaving” view still takes up space while “entering” view is animating in

Question

I'm using AngularJS 1.1.5 and trying out the ng-animate directive with daneden's animate.css. I have a couple of views set up using routing. I'm using Twitter Bootstrap 3 RC1.

Here is the code for the ng-view:

<div class="container" ng-view ng-animate="{enter:'animated fadeInRightBig', leave:'animated fadeOutLeft'}"></div>

And here is the routing part:

$routeProvider
    .when('/', {
        templateUrl: '/Home/Home',
        title: 'Home'
    })
    .when('/Home/Home', {
        templateUrl: '/Home/Home',
        title: 'Home'
    })
    .when('/Home/About', {
        templateUrl: '/Home/About',
        title: 'About'
    })
    .otherwise({
        redirectTo: '/'
    });

    $locationProvider.html5Mode(false).hashPrefix('!');

The animation works (that is, I see the animation effects) and the view changes as well.

The thing I'm having trouble with is that the "leaving" view seems to be still taking up space while the "entering" view is animating in.

The effect is that the enter animation of the new view happens below the space previously taken up by the leaving view. It's as if the old view was still there, even though it has already "animated out". The new view then suddenly jerks up to the proper position once its animation finishes. I'm using fadeInRightBig for enter and fadeOutLeft for leave.

How can this be fixed? The expected result is a smooth transition with no jerking, like the animation for the ng-switch in slides 1 to 3 here. (Except that I'm using ng-view of course.)

Thanks!

Edit:

I take it back, the 'leave' animation hasn't completely finished while the 'enter' animation is running.

So I guess my question will change a bit.. But the expected result is the same. How do I achieve the smooth "sliding" effect?

Answer 1

I had the same issue when I first started. To achieve the smooth effect simply change the timings of the CSS. Go into the animate.css file, look for the one the one you need to delay (in your case it would be fadeInRightBig. Change delay (or add a delay to it of about 1 or 2 seconds).

Another alternative is to make the position of the exit animation absolute.

Let me know if this helps. It worked for me. I wish that angularjs already handled this for us. Maybe the next version will solve these issues for us.

Answer 2

Another common way to solve this problem is to deal with z-index. The ng-enter usually must be below the ng-leave.