update anijs demo

troolee · troolee · commit 62c3e706b6f1 · 2016-02-23T18:24:13.000-08:00
diff --git a/demo/anijs.html b/demo/anijs.html
@@ -42,7 +42,7 @@ <h1>AniJS demo</h1>
         </div>
 
         <div>
-            <h4 data-anijs="if: added, do: swing animated, on: $gridstack">Widget added</h4>
+            <h4>Widget added</h4>
         </div>
 
         <br/>
@@ -57,9 +57,14 @@ <h4 data-anijs="if: added, do: swing animated, on: $gridstack">Widget added</h4>
             $('.grid-stack').gridstack();
             var self = this;
             this.grid = $('.grid-stack').data('gridstack');
-            AniJS.run();
-            self.gridstackNotifier = AniJS.getNotifier('gridstack');
             $('.grid-stack').on('added', function(event, items) {
+                // add anijs data to gridstack item
+                for (var i = 0; i < items.length; i++) {
+                    $(items[i].el[0]).attr('data-anijs', 'if: added, do: swing animated, after: $removeAnimations, on: $gridstack');
+                }
+                AniJS.run();
+                self.gridstackNotifier = AniJS.getNotifier('gridstack');
+                // fire added event!
                 self.gridstackNotifier.dispatchEvent('added');
             });
             $('#add-widget').click(function() {
@@ -68,8 +73,15 @@ <h4 data-anijs="if: added, do: swing animated, on: $gridstack">Widget added</h4>
 
             function addNewWidget() {
                 var grid = $('.grid-stack').data('gridstack');
-                grid.addWidget($('<div class="grid-stack-item-content"></div>'), 0, 0, Math.floor(1 + 3 * Math.random()), Math.floor(1 + 3 * Math.random()), true);
+                grid.addWidget($('<div><div class="grid-stack-item-content"></div></div>'), 0, 0, Math.floor(1 + 3 * Math.random()), Math.floor(1 + 3 * Math.random()), true);
             }
+
+            var animationHelper = AniJS.getHelper();
+
+            //Defining removeAnimations to remove existing animations
+            animationHelper.removeAnimations = function(e, animationContext){
+                $('.grid-stack-item').attr('data-anijs', '');
+            };
         });
     </script>
 </body>
