css - 使用 ng-class 更改类时， Angular 动画不适用于 ng-show

Question

我想使用 ng-show 和动画为无序列表中包含的某些对象创建一个 slider 。当物体沿一个方向滑动时，我的这个工作很好。

但是，当我希望用户能够向左或向右滑动对象时，使用 ng-class 更改类时，动画不再起作用。

左/右案例的 html 是:

<div class="slide-holder">
  <ul class="slide-list">
    <li class="slide-object" ng-show="directionElement == 0" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}">
      Hello There 1! How are you?</li>
    <li class="slide-object" ng-show="directionElement == 1" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}">
      Hello There 2! How are you?</li>
    <li class="slide-object" ng-show="directionElement == 2" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}">
      Hello There 3! How are you?</li>
    <li class="slide-object" ng-show="directionElement == 3" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}">
      Hello There 4! How are you?</li>
  </ul>
</div>

Controller 中改变方向的函数有:

$scope.left = function() {
  $scope.direction === 'left'
  if($scope.directionElement > 0)
    $scope.directionElement = $scope.directionElement - 1;
};

$scope.right = function() {
  $scope.direction === 'right'
  if($scope.directionElement < 3)
  $scope.directionElement = $scope.directionElement + 1;
};

过渡 css 看起来像这样:

.slide-object-left.ng-hide-add,
.slide-object-left.ng-hide-remove {
  -webkit-transition:0.5s linear all;
  -moz-transition:0.5s linear all;
  -o-transition:0.5s linear all;
  transition:0.5s linear all;

  position:absolute;
}

.slide-object-left.ng-hide-add {
  left:100%;
}

.slide-object-left.ng-hide-remove,
.slide-object-left.ng-hide-add.ng-hide-add-active {
  left:0;
}

.slide-object-left.ng-hide-remove.ng-hide-remove-active {
  left:-100%;
}

我创建了一个 plnkr 来显示这两种情况:http://plnkr.co/edit/sh0uCAPZiCne4Y5ynFQ2?p=preview

编辑 1: 根据 Theoretisch 的回答，我已经更新了 plnkr 以修复 Controller 中导致方向切换出现故障的“===”错误。但是，主要的 ng 类问题和动画问题仍然存在。这是更新 plnkr:http://plnkr.co/edit/lv1BBFjRoOmenTv7IBeC?p=preview

Answer 1

动画不工作的原因是因为 Controller 函数中的 ===。

你应该只使用 = 而不是 === 因为你不想将 $scope.direction 与你的字符串进行比较.

$scope.left = function() {
  $scope.direction = 'left'
  if($scope.directionElement > 0)
    $scope.directionElement = $scope.directionElement - 1;
};

$scope.right = function() {
  $scope.direction = 'right'
  if($scope.directionElement < 3)
  $scope.directionElement = $scope.directionElement + 1;
};

现在动画再次运行。但是如果你想要一个好的和正确的动画，还有一些事情要做。其中之一是改变你的CSS。如果放慢动画速度，您会看到错误的 slide-object 被激活了。

只需更改它即可更正它:

.slide-object-left.ng-hide-add {
  right:-100%;
}

.slide-object-left.ng-hide-remove,
.slide-object-left.ng-hide-add.ng-hide-add-active {
  right:0;
}

.slide-object-left.ng-hide-remove.ng-hide-remove-active {
  right:100%;
}

.slide-object-right.ng-hide-add {
  left:-100%;
}

.slide-object-right.ng-hide-remove,
.slide-object-right.ng-hide-add.ng-hide-add-active {
  left:0%;
}

.slide-object-right.ng-hide-remove.ng-hide-remove-active {
  left:100%;
}

我将 right 切换为 left 并另外更改了代数符号。你可以找到我的改动 HERE .

编辑:我不确定为什么动画如此错误。我认为这是因为 ng-class。我删除了它并编辑了你的 ng-show。可以看到编辑好的Plunk HERE .这不是最好的解决方案，但我希望它能暂时解决您的问题。(也许你可以用 THIS fiddle 改进它)