@@ -42,7 +42,7 @@ <h1>AniJS demo</h1>
4242 </ div >
4343
4444 < div >
45- < h4 data-anijs =" if: added, do: swing animated, on: $gridstack " > Widget added</ h4 >
45+ < h4 > Widget added</ h4 >
4646 </ div >
4747
4848 < br />
@@ -57,9 +57,14 @@ <h4 data-anijs="if: added, do: swing animated, on: $gridstack">Widget added</h4>
5757 $ ( '.grid-stack' ) . gridstack ( ) ;
5858 var self = this ;
5959 this . grid = $ ( '.grid-stack' ) . data ( 'gridstack' ) ;
60- AniJS . run ( ) ;
61- self . gridstackNotifier = AniJS . getNotifier ( 'gridstack' ) ;
6260 $ ( '.grid-stack' ) . on ( 'added' , function ( event , items ) {
61+ // add anijs data to gridstack item
62+ for ( var i = 0 ; i < items . length ; i ++ ) {
63+ $ ( items [ i ] . el [ 0 ] ) . attr ( 'data-anijs' , 'if: added, do: swing animated, after: $removeAnimations, on: $gridstack' ) ;
64+ }
65+ AniJS . run ( ) ;
66+ self . gridstackNotifier = AniJS . getNotifier ( 'gridstack' ) ;
67+ // fire added event!
6368 self . gridstackNotifier . dispatchEvent ( 'added' ) ;
6469 } ) ;
6570 $ ( '#add-widget' ) . click ( function ( ) {
@@ -68,8 +73,15 @@ <h4 data-anijs="if: added, do: swing animated, on: $gridstack">Widget added</h4>
6873
6974 function addNewWidget ( ) {
7075 var grid = $ ( '.grid-stack' ) . data ( 'gridstack' ) ;
71- grid . addWidget ( $ ( '<div class="grid-stack-item-content"></div>' ) , 0 , 0 , Math . floor ( 1 + 3 * Math . random ( ) ) , Math . floor ( 1 + 3 * Math . random ( ) ) , true ) ;
76+ 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 ) ;
7277 }
78+
79+ var animationHelper = AniJS . getHelper ( ) ;
80+
81+ //Defining removeAnimations to remove existing animations
82+ animationHelper . removeAnimations = function ( e , animationContext ) {
83+ $ ( '.grid-stack-item' ) . attr ( 'data-anijs' , '' ) ;
84+ } ;
7385 } ) ;
7486 </ script >
7587</ body >
0 commit comments