AngularJS - Изменение нг ввести анимацию такого элемента в

Question

У меня есть несколько состояний в моей странице, изменяющих следующий элемент:

<header ng-view></header> 

Я decieded добавить анимацию перехода страницы так и решил пойти с ng.animate + animate.css. поэтому я добавил следующий класс к заголовку:

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

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

и изменил мой заголовок к этому:

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

Это работает довольно хорошо, но проблема возникает, когда я хочу изменить анимацию на беге. Так как пользователь может перейти на следующую страницу или на предыдущую страницу, чтобы класс изменился с «slideInLeft slideOutRight» на «slideOutLeft slideInRight»

Я попытался изменить атрибут класса напрямую, но новый элемент (тот, который входит) остался с теми же классами, что и раньше. Я пробовал использовать ng-class = 'someVar' и давал 'someVar' имена классов, но это тоже не сработало, я предполагаю, что угловой не имеет возможности обновлять интерфейс, поскольку я изменил свойства 'someVar' перед использованием $ state.go на новую страницу.

Кто-то сделал это раньше/имеет идеи, как это решить?

Answer 1

мне удалось сделать это с помощью:

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

Поставив функцию в атрибуте нг-класса, я мог бы просто сделать его вернуть переменную области видимости. Эта переменная области изменяется до перехода на следующую страницу/предыдущую страницу.

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

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

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