Fade out item on list before removing

Question

I'm currently trying to create an animation where a list item fades before it gets removed from the array.

With the code below users can construct an array of items and the array is displayed with the ng-repeat. They can remove items by clicking on the directive which makes a call to the 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>

Here's the directive...

(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>'
    }
})
})();

And the 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);
    }

Right now the next item in the list is immediately replacing the removed item and the removed item, and the removed item is dropping to the bottom of the list before disappearing. Looks pretty sloppy. Any help would be greatly appreciated!

Answer 1

It seems like the main problem here was that I was tracking the ng-repeat by $index. Though I don't completely understand why, removing this allows the ng-animate to work perfectly without any need of implementing a jqLite solution.