我想要一种 slider (但实际上更像是一个 ppt，并且根据您单击的按钮，您得到的结果会有所不同)。
我有效地使用 ng-animate-swap 来更改当前显示的幻灯片，并且在仅以一种方式进行时效果很好。 我的问题是，当我尝试走另一条路时，我更改了动画类，但对于即将成为的上一张幻灯片，动画仍将是之前的状态...... 您可以在这里找到一个受 ng-animate-swap 文档启发的工作示例: 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>
脚本.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;
};
}]);
动画.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;
}
最佳答案
只需在 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;
});
};
关于javascript - 使用 ng-animation-swap 进行两个方向的动画交换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35274150/