удалить элемент из DOM с анимацией SlideUp

Question

Я хочу удалить элемент из данных в контроллере, и это должно удалить элемент узла из DOM с анимацией SlideUp.

Я пытался в контроллере:

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

Мои plnkr с попыткой использовать ngAnimate

Но это работает совершенно неправильно.

Каким-либо адекватным способом удалить HTML-элемент из DOM с помощью анимации, удалив элемент из массива через $scope.items.splice(i, 1); ??!?!

Это магистральная реализация:

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() 
}, 

Вот совершенно неправильно ngAnimate в моем plkr:

Answer 1

Я думаю, что причина того, что анимация не работает здесь не из-за вашего метод удаления элемента HTML, а скорее из-за поведения отслеживания для ng-repeat.

Этот plnkr является измененной версией того, что вы предоставили. Я удалил «трек по $ индекса» и связанного приложения $ индекса, который будет отображаться для каждого элемента списка выглядит следующим образом:

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

Если вы сосредоточитесь только на $ значение индекса, что я добавил к каждому элементу списка, удаление элемент будет выглядеть так, как будто последний элемент всегда удаляется. Следовательно, это, по-видимому, является причиной того, что вы продолжали видеть, что последнее удалялось при использовании «track by $ index».

Обратите внимание, что я просто использую поведение отслеживания по умолчанию, но поскольку ng-repeat не позволяет дублировать элементы в массивах, он не будет работать в сценариях, где то, что вы пытаетесь добавить, уже существует. Если вы посмотрите на ссылку API для ng-repeat, найденную here, то, по-видимому, есть хорошие примеры для других способов использования трека.

Надеюсь, это поможет.