使用ng-class更改类时,角度动画不适用于ng-show

Question

我想使用ng-show和动画为无序列表中的某些对象创建一个滑块.当物体向一个方向滑动时,我的效果很好.

但是,当我希望用户能够向左或向右滑动对象时,使用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>

控制器中用于改变方向的功能是:

$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以修复控制器中的'==='错误,该错误导致方向切换到故障.但是,主要的ng类问题和动画问题仍然存在.这是更新plnkr:http://plnkr.co/edit/lv1BBFjRoOmenTv7IBeC？p = preview

Answer 1

动画不起作用的原因是因为===控制器的功能.

而不是===你应该使用,=因为你不想$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并另外更改了代数符号.你可以在这里找到我的更改.

编辑:我不确定动画为何如此错误.我认为这是因为ng-class.我删除了它并编辑了你的ng-show.你可以在这里看到编辑过的Plunk .这不是最好的解决方案,但它现在解决了我的问题,我希望.(也许你可以通过这个小提琴改进它)