javascript - 删除之前淡出列表中的项目

Question

我目前正在尝试创建一个动画，其中列表项在从数组中删除之前会逐渐消失。

使用下面的代码，用户可以构造一个项目数组，并且该数组通过 ng-repeat 显示。他们可以通过单击调用 Controller 的指令来删除项目。

<div id="vocabId" class="vocab-list-construct">
    <div draggable-item track-array class="vocab-item" ng-repeat="obj in vocab.vocabConstruct track by $index"
         id={{obj.id}}>
        <div draggable='true' class="vocab-panel">
            <delete-vocab-item remove="vocab.vocabDeconstruct(obj.id)"></delete-vocab-item>
            <hr/>
            <span ng-click="vocab.vocabItem(obj.name)" 
                  class="vocab-name text-link">{{obj.name}}</span>
            &nbsp;&nbsp;{{obj.definition}}
                <br/><br/>
            </div>
        </div>
    </div>

这是指令...

(function(){
'use strict';

//directive for delete vocab button and animation
angular.module('ganeshaApp')
.directive('deleteVocabItem', function($timeout){
    return{
        restrict: 'E',
        link: function(scope, element, attrs){
            element.bind("click", function(){
                //some type of fade before the remove event fires 
                scope.$apply(attrs.remove)
            })
        },
        template: '<span class="glyphicon glyphicon-remove-circle pull-right"></span>'
    }
})
})();

还有 Controller ...

    vocab.vocabDeconstruct = function(id){
        var index;
        angular.forEach(vocab.vocabConstruct, function(value, key){
            if (value.id === id){
                index = vocab.vocabConstruct.indexOf(value)
            }
        })
        vocab.vocabConstruct.splice(index, 1);
    }

现在，列表中的下一个项目将立即替换已删除的项目和已删除的项目，并且已删除的项目在消失之前会下降到列表的底部。看上去相当邋遢。任何帮助将不胜感激!

Answer 1

这里的主要问题似乎是我通过 $index 跟踪 ng-repeat。虽然我不完全明白为什么，删除它可以让 ng-animate 完美工作，而不需要实现 jqLit​​e 解决方案。