Merge pull request gridstack#25 from ishields/grid-stack-animation

troolee · troolee · commit 4fed4cf215ec · 2014-12-04T20:43:47.000-08:00
Add option for animating gridstack with css transitions
diff --git a/src/gridstack.css b/src/gridstack.css
@@ -101,3 +101,20 @@
         height: auto !important;
     }
 }
+
+.grid-stack.grid-stack-animate .grid-stack-item {
+    -webkit-transition: left .3s, top .3s, height .3s, width .3s;
+    -moz-transition: left .3s, top .3s, height .3s, width .3s;
+    -o-transition: left .3s, top .3s, height .3s, width .3s;
+    -ms-transition: left .3s, top .3s, height .3s, width .3s;
+    transition: left .3s, top .3s, height .3s, width .3s;
+}
+/*Don't animate the placeholder or when dragging/resizing*/
+.grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
+.grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
+.grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder{
+    -webkit-transition: left .0s, top .0s, height .0s, width .0s;
+    -moz-transition: left .0s, top .0s, height .0s, width .0s;
+    -o-transition: left .0s, top .0s, height .0s, width .0s;
+    transition:  left .0s, top .0s, height .0s, width .0s;
+}
diff --git a/src/gridstack.js b/src/gridstack.js
@@ -283,10 +283,12 @@
             auto: true,
             min_width: 768,
             float: false,
-            _class: 'grid-stack-' + (Math.random() * 10000).toFixed(0)
+            _class: 'grid-stack-' + (Math.random() * 10000).toFixed(0),
+            animate: false
         });
 
         this.container.addClass(this.opts._class);
+        this.set_animation(this.opts.animate);
         this._styles = Utils.create_stylesheet();
         this._styles._max = 0;
 
@@ -427,10 +429,12 @@
             self.grid.end_update();
 
             self.grid._sort_nodes();
-            _.each(self.grid.nodes, function (node) {
-                node.el.detach();
-                self.container.append(node.el);
-            });
+            setTimeout(function() { //if animating, delay detaching & reattaching all elements until animation finishes
+                _.each(self.grid.nodes, function (node) {
+                    node.el.detach();
+                    self.container.append(node.el);
+                });
+            }, (self.opts.animate ? 300 : 0));
         };
 
         el.draggable({
@@ -477,6 +481,15 @@
         }
     };
 
+    GridStack.prototype.set_animation = function (enable) {
+        if (enable) {
+            this.container.addClass('grid-stack-animate');
+        }
+        else {
+            this.container.removeClass('grid-stack-animate');
+        }
+    }
+
     GridStack.prototype.add_widget = function (el, x, y, width, height, auto_position) {
         el = $(el);
         if (typeof x != 'undefined') el.attr('data-gs-x', x);
