AngularJS - Changing an element's ng-enter animation

Question

I have multiple states in my page that change the following element :

<header ng-view></header>

I decieded to add animation to the page's transition so and decided to go with ng.animate + animate.css. so I added the following class to the header :

.slideInLeft.ng-enter
{
  transition-animation: slideInLeft 1s ease-in-out;
}

.slideOutRight.ng-leave
{
  transition-animation: slideOutRight 1s ease-in-out;
}

and changed my header to this :

<header ng-view class='slideInLeft slideOutRight'></header>

This works quite well but the problem comes when I want to change my animations on the run. Since the user can go to the next page or the previous page so the class should change from 'slideInLeft slideOutRight' to 'slideOutLeft slideInRight'

I tried changing the class attribute directly but the new element (the one which is entering) stayed with the same classes as before. I tried using ng-class='someVar' and giving 'someVar' the names of the classes but that didn't work either, I'm guessing angular didn't have a chance to update the UI since I changed the properites of 'someVar' right before using $state.go to the new page.

Someone has done it before/has an ideas how to solve this?

score 0 · Answer 1 · answered Mar 08 '15 at 23:22

I managed to do it using :

<header ng-view ng-class="getAnimation()"></header>

By putting a function in the ng-class attribute, I could just make it return a scope variable. That scope variable is changed right before I go to the next page/previous page.

$scope.getAnimation = funtion()
{
    return $scope.classVar;
}

$scope.nextClick = function()
{
    $scope.classVar = "slideInLeft slideOutRight";
}

$scope.prevClick = function()
{
    $scope.classVar = "slideOutLeft slideInRight";
}

AngularJS - Changing an element's ng-enter animation

1 Answers1