使用 slideUp 动画从 DOM 中删除元素

Question

我想从控制器中的数据中删除元素，这应该使用 slideUp 动画从 DOM 中删除节点元素。

我在控制器中试过：

$scope.remove = function (i) { $scope.items.splice(i, 1); };

我的 plnkr 尝试使用 ngAnimate

但它完全错误。

通过 $scope.items.splice(i, 1); 从数组中删除项目来使用动画从 DOM 中删除 HTML 元素是否有任何合适的方法？？！？！

这是backbone实现：

initialize: function () {
    var that = this;
    collection.on('destroy', function (model) {
        that.$('.items[data-id="' + model.id + '"]').stop().slideUp();
    });
},
remove: function (e) {
    var el = $(e.currentTarget);
    var id = el.data('id');
    collection.get(id).destroy()
},

我的 plkr 中的 ngAnimate 完全错误：

Answer 1

我认为动画在这里不起作用的原因不是因为您删除 HTML 元素的方法，而是因为 ng-repeat 的跟踪行为。

此 plnkr 是您所提供内容的修改版本。我已经删除了 'track by $index' 并绑定了要为每个列表项显示的 $index，如下所示：

<li class="slide" ng-repeat="item in things">{{$index}} {{item}}<a href="#" ng-click="$event.preventDefaul(); removeThing($index)">Remove thing</a></li>

如果您只关注我添加到每个列表项的 $index 值，则删除一个项目将看起来好像总是在删除最后一个项目。因此，这似乎是您在使用 'track by $index'.

时一直看到最后一件事被删除的原因

请注意，我只是使用默认的跟踪行为，但由于 ng-repeat 不允许数组中的重复项，因此在您尝试添加的内容已经存在的情况下，它不会起作用。如果您查看 ng-repeat 的 API 参考，发现 here，似乎有关于您可以使用 'track by' 的其他方式的很好示例。

希望对您有所帮助。

使用 slideUp 动画从 DOM 中删除元素

remove element from DOM with slideUp animation

angularjs

ng-animate