Angular.js page transition & $animate.addClass

Question

I would like to add a specific class to my wrapper when my route change so I can control what CSS animation will be triggered.

I try to do it like that : http://plnkr.co/edit/KRwBFb6bCTkit9eKg8yb?p=preview

$rootScope.$on( "$routeChangeSuccess", function(event, next, current) {
   //Code to skip animation on the first load/page
    if( 'undefined' === typeof current || $scope.pageClass == '' ) return false;


    var elem = document.querySelector("#wrapper");
    var viewElem = angular.element(elem);

    $animate.addClass(viewElem, $scope.pageClass).then(function(){
        $animate.removeClass(viewElem, $scope.pageClass);
    });
});

But no class is added, am i using this function the wrong way ?

Answer 1

What your code is doing is adding the correct CSS class to the #wrapper element and then removing it immediately after it has been added. The promise returned by the addClass function (which you are using to remove the class) is resolved when the class is added and not when the animation defined by the class is completed.

If what you are trying to do is remove the CSS class from the #wrapper after the animation has completed so that you can reset it for the next animation you need to bind your code to the enter event instead. Something like the following:

$animate.on('enter', angular.element(document.querySelector("#wrapper")),
     function callback(element, phase) {
       if (phase === 'close') {
         $animate.removeClass(angular.element(document.querySelector("#wrapper")), 'RL');
         $animate.removeClass(angular.element(document.querySelector("#wrapper")), 'LR');
       }
     }
  );