JVG*_*JVG 7 javascript angularjs ng-animate angularjs-animation
非常简单的问题:在从范围中删除项目时AngularJS 1.2.x,是否可能(以及如何)ngAnimate触发？
这是Plunker的一个例子:
http://plnkr.co/edit/tpl:FrTqqTNoY8BEfHs9bB0f?p=preview
码:
<body ng-controller="MainCtrl">
<div ng-repeat="img in imgs" class="my-repeat-animation">
<img ng-src="{{img}}" />
<button class="btn btn-primary" ng-click="remove(img)">DELETE</button>
</div>
</body>
脚本:
app.controller('MainCtrl', function($scope) {
$scope.imgs = ['http://cache.mrporter.com/images/products/362812/362812_mrp_in_l.jpg', 'http://cache.mrporter.com/images/products/362807/362807_mrp_in_l.jpg', 'http://cache.mrporter.com/images/products/364762/364762_mrp_in_l.jpg', 'http://cache.mrporter.com/images/products/357020/357020_mrp_in_l.jpg']
$scope.remove = function(image){
var index = $scope.imgs.indexOf(image);
$scope.imgs.splice(index,1);
}
});
正如你所看到的,点击"删除"按钮运行splice()上$scope.imgs.我想动画这个,而不是让它消失.我正在使用刚刚从Moo年份文章中复制粘贴的过渡,这在过滤范围时效果很好,但显然不是从范围中删除时.
确保app包含ngAnimate为依赖项,angular-animate.js之后加载文件angular.js,并将此示例动画添加到CSS:
/* Add animation */
.my-repeat-animation.ng-enter.ng-enter-active,
.my-repeat-animation.ng-leave {
opacity: 1;
-webkit-transition: opacity 300ms linear;
-moz-transition: opacity 300ms linear;
transition: opacity 300ms linear;
}
/* Remove animation */
.my-repeat-animation.ng-leave.ng-leave-active,
.my-repeat-animation.ng-enter {
opacity: 0;
-webkit-transition: opacity 300ms linear;
-moz-transition: opacity 300ms linear;
transition: opacity 300ms linear;
}
这将动画添加和删除imgs.
| 归档时间： |
|
| 查看次数： |
5420 次 |
| 最近记录： |