Question

我的页面中有多个状态可以更改以下元素：

<header ng-view></header>

我决定将动画添加到页面的转换中，所以决定使用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>

这很有效，但是当我想在运行中更改动画时问题就出现了。由于用户可以转到下一页或上一页，因此该课程应该从“幻灯片幻灯片幻灯片”更改为“幻灯片放映”。 to＆＃39; slideOutLeft slideInRight＆＃39;

我尝试直接更改class属性，但是新元素（正在输入的元素）保留了与之前相同的类。我尝试过使用ng-class =＆＃39; someVar＆＃39;并且给予某些人以及＃39;这些课程的名称，但也没有用，我猜测角度没有机会更新用户界面，因为我改变了某些角色的特性。在将$ state.go用于新页面之前。

之前有人已经做过/有想法如何解决这个问题？

Answer 1

我设法使用：

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

通过在ng-class属性中放置一个函数，我可以让它返回一个范围变量。在我转到下一页/上一页之前，该范围变量已经更改。

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

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

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

AngularJS - 更改元素的输入动画

1 个答案: