gpt4 book ai didi

javascript - 从范围中删除项目时使用 AngularJS 的 ngAnimate

转载 作者:数据小太阳 更新时间:2023-10-29 04:37:03 24 4
gpt4 key购买 nike

非常简单的问题:在 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);
}
});

如您所见,单击“删除”按钮会在 $scope.imgs 上运行 splice()。我想对此进行动画处理,而不是让它简单地消失。我正在使用从 this Year Of Moo article 复制粘贴的过渡效果这在过滤范围时工作得很好,但在从范围中删除时显然不行。

最佳答案

确保 app 包含 ngAnimate 作为依赖项,文件 angular-animate.jsangular.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 添加和删除动画。

关于javascript - 从范围中删除项目时使用 AngularJS 的 ngAnimate,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19922463/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com