Question

我想有一种滑块（但实际上更像是一个ppt，根据你点击按钮你会得到的结果会有所不同）。

我有效地使用ng-animate-swap来改变当前显示的幻灯片，并且只在一种方式下才能正常工作。我的问题是当我尝试走另一条路时，我改变了我的动画类，但对于即将上映的幻灯片，动画仍将是之前的状态之一... 你可以在这里找到一个受ng-animate-swap doc启发的工作示例： http://plnkr.co/edit/dArF1W7eM7Znur7Myx3O?p=preview

正如您所看到的，问题是CSS类的更改仅适用于新幻灯片，而不适用于将要删除的幻灯片。

您可以在下面找到相关代码：

index.html：

<body ng-app="ngAnimateSwapExample">
  <div ng-controller="AppCtrl">
     <div class="container">
       <div ng-animate-swap="number" class="cell {{swapAnimation}}" ng-class="colorClass(number)">
         {{ number }}
       </div>
    </div>
    <a ng-click="previousNumber()">PREVIOUS</a>
    <a ng-click="nextNumber()">NEXT</a>
  </div>
</body>

script.js：

.controller('AppCtrl', ['$scope',function($scope) {
$scope.number = 0;

var colors = ['red','blue','green','yellow','orange'];
$scope.colorClass = function(number) {
  return colors[number % colors.length];
};

$scope.nextNumber = function(){
  $scope.swapAnimation = "swap-animation";
  $scope.number += 1;
};

$scope.previousNumber = function(){
  $scope.swapAnimation = "swap-animation-reverse";
  $scope.number -= 1;
};


}]);

animations.css：

.container {
   height:250px;
   width:250px;
   position:relative;
   overflow:hidden;
   border:2px solid black;
 }
.container .cell {
   font-size:150px;
   text-align:center;
   line-height:250px;
   position:absolute;
   top:0;
   left:0;
   right:0;
   border-bottom:2px solid black;
}
.swap-animation.ng-enter, .swap-animation.ng-leave {
   transition:0.5s linear all;
 }
 .swap-animation.ng-enter {
   top:-250px;
 }
 .swap-animation.ng-enter-active {
   top:0px;
 }
 .swap-animation.ng-leave {
   top:0px;
 }
 .swap-animation.ng-leave-active {
   top:250px;
 }


 .swap-animation-reverse.ng-enter, .swap-animation-reverse.ng-leave {
   transition:0.5s linear all;
 }

 .swap-animation-reverse.ng-enter {
   top:250px;
 }
 .swap-animation-reverse.ng-enter-active {
   top:0px;
 }
 .swap-animation-reverse.ng-leave {
   top:0px;
 }
 .swap-animation-reverse.ng-leave-active {
   top:-250px;
 }

Answer 1

只需在nextNumber（）和previousNumber（）逻辑中更改cssClass后添加超时，因此在第一个循环中元素更改类，在下一个循环中，ng-animate-swap执行动画。

$scope.nextNumber = function(){
  $scope.swapAnimation = "swap-animation";
  $timeout(function(){
    $scope.number += 1;
  });
};

$scope.previousNumber = function(){
  $scope.swapAnimation = "swap-animation-reverse";
  $timeout(function(){
    $scope.number -= 1;
  });
};

http://plnkr.co/edit/yEDmEWRGxIrAnalQF20u?p=preview

使用ng-animation-swap进行双向动画交换

1 个答案: