ngAnimate 离开回调的速度动画
Velocity animations for leave callback of ngAnimate
我正在尝试使用速度和 angular 制作离开动画,这样当 table 行离开时它们会向右移动。
在示例中,我使用离开回调来尝试为 ng-repeat 的离开设置动画,但回调运行但没有任何反应!
angular.module('myApp', ['ngAnimate'])
.controller('myCtrl', function($scope) {
$scope.items = ['item1', 'item2', 'item3']
$scope.shiftItems = function() {
var items = ['asdf', 'bill', 'bob', 'joe', 'items']
for (var i = 0; i < $scope.items.length; i++)
$scope.items.shift()
for (var i = 0; i < items.length; i++)
$scope.items.push(items[i])
}
})
.animation('.velocity-tableSlideInOut', [function() {
return {
enter: function(element, done) {
Velocity(element, 'transition.slideLeftIn', [0.36, 0.96, 0.6, 0.96])
},
leave: function(element) {
Velocity(element, {opacity: 0}, [0.4, 0.04, 0.64, 0.04])
}
}
}])
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-animate.js"></script>
<div ng-app='myApp'>
<ul ng-controller='myCtrl'>
<li class='velocity-tableSlideInOut' ng-repeat='item in items track by $index'>
{{item}}
</li>
<li>
<button ng-click='shiftItems()'>Reorder</button>
</li>
</ul>
</div>
这实际上是使用 track by $index
时的预期行为。
您从 3 个项目开始,索引将为:
0 1 2
您删除了这 3 个项目,添加了 6 个新项目,现在有了索引:
0 1 2 3 4 5
没有索引离开,所以不会触发离开动画。但是有 3 个新索引,因此索引为 3、4 和 5 的项目将触发进入动画。
解决方案是跳过 track by
或通过与对象实际相关的 属性 进行跟踪,例如唯一 ID。如果您的集合仅包含字符串并且您需要支持重复项,则需要将它们包装在对象中,例如:
{ value: 'item1' }
我正在尝试使用速度和 angular 制作离开动画,这样当 table 行离开时它们会向右移动。
在示例中,我使用离开回调来尝试为 ng-repeat 的离开设置动画,但回调运行但没有任何反应!
angular.module('myApp', ['ngAnimate'])
.controller('myCtrl', function($scope) {
$scope.items = ['item1', 'item2', 'item3']
$scope.shiftItems = function() {
var items = ['asdf', 'bill', 'bob', 'joe', 'items']
for (var i = 0; i < $scope.items.length; i++)
$scope.items.shift()
for (var i = 0; i < items.length; i++)
$scope.items.push(items[i])
}
})
.animation('.velocity-tableSlideInOut', [function() {
return {
enter: function(element, done) {
Velocity(element, 'transition.slideLeftIn', [0.36, 0.96, 0.6, 0.96])
},
leave: function(element) {
Velocity(element, {opacity: 0}, [0.4, 0.04, 0.64, 0.04])
}
}
}])
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-animate.js"></script>
<div ng-app='myApp'>
<ul ng-controller='myCtrl'>
<li class='velocity-tableSlideInOut' ng-repeat='item in items track by $index'>
{{item}}
</li>
<li>
<button ng-click='shiftItems()'>Reorder</button>
</li>
</ul>
</div>
这实际上是使用 track by $index
时的预期行为。
您从 3 个项目开始,索引将为:
0 1 2
您删除了这 3 个项目,添加了 6 个新项目,现在有了索引:
0 1 2 3 4 5
没有索引离开,所以不会触发离开动画。但是有 3 个新索引,因此索引为 3、4 和 5 的项目将触发进入动画。
解决方案是跳过 track by
或通过与对象实际相关的 属性 进行跟踪,例如唯一 ID。如果您的集合仅包含字符串并且您需要支持重复项,则需要将它们包装在对象中,例如:
{ value: 'item1' }