updated event listeners to use Marionette 2.4.x event names

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "Marionette.AnimatedCollectionView",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "homepage": "https://github.com/medialize/Marionette.AnimatedCollectionView",
   "description": "Allow animating insertion/removal of ItemViews in a Marionette CollectionView",
   "main": "src/Marionette.AnimatedCollectionView.js",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "marionette.animatedcollectionview",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Allow animating insertion/removal of ItemViews in a Marionette CollectionView",
   "main": "src/Marionette.AnimatedCollectionView.js",
   "files": [

src/Marionette.AnimatedCollectionView.js

@@ -8,7 +8,7 @@
   // https://github.com/umdjs/umd/blob/master/returnExports.js
   if (typeof exports === 'object') {
     // Node
-    module.exports = factory(require('jquery', 'jQuery-transitionEndPromise'));
+    module.exports = factory(require('jquery'), require('jquery-transitioendpromise'));
   } else if (typeof define === 'function' && define.amd) {
     // AMD. Register as an anonymous module.
     define(['jquery', 'jQuery-transitionEndPromise'], factory);
@@ -32,7 +32,7 @@
       callback();
       return;
     }
-    
+
     this._buffer.push(callback);
     this.run();
   };
@@ -65,10 +65,18 @@
 
     return View.extend({
       initialize: function() {
-        this.listenTo(this, 'collection:rendered', function() {
+        this.listenTo(this, 'render:collection', function() {
           // bind before:item:added after the collection has been fully rendered,
           // otherwise the add animation would be triggered for everything
-          this.listenTo(this, 'before:item:added', this._animateAdd, this);
+          this.listenTo(this, 'before:add:child', function(_view){
+            var view = _view;
+            this._animateAdd(_view)
+                .then(function(){
+                  // after the animation ended, remove the CSS class
+                  // from the element to avoid various artifacts occuring
+                  view.$el.removeClass(o.add);
+                })
+          }, this);
         }, this);
 
         this._animateSequence = new Sequence(o);
@@ -77,16 +85,19 @@
 
       removeChildView: function(view) {
         this._animateRemove(view)
-          .then(_removeChildView.bind(this, view));
+            .then(_removeChildView.bind(this, view));
       },
 
       _animateAdd: function(view) {
+        var promise = view.$el.animationEndPromise(o.promise);
         view.$el.addClass(o.add);
         view.$el.css('animation-play-state', 'paused');
 
         this._animateSequence.push(function() {
           view.$el.css('animation-play-state', '');
         });
+
+        return promise;
       },
 
       _animateRemove: function(view) {
@@ -104,7 +115,7 @@
     });
   }
 
-  decorateAnimatedCollectionView.version = '0.1.5';
+  decorateAnimatedCollectionView.version = '0.1.6';
   decorateAnimatedCollectionView.defaults = {
     add: 'item-adding',
     remove: 'item-removing',
@@ -116,4 +127,4 @@
   };
 
   return decorateAnimatedCollectionView;
-}));
+}));