From 461123ea53d7f0d5e9d17c86db38173c3b637461 Mon Sep 17 00:00:00 2001
From: ianshields <ishields@weddingwire.com>
Date: Thu, 4 Dec 2014 16:21:22 -0500
Subject: [PATCH] Add option for animating gridstack with css transitions

---
 src/gridstack.css | 17 +++++++++++++++++
 src/gridstack.js  | 23 ++++++++++++++++++-----
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/gridstack.css b/src/gridstack.css
index d240828..ce1260c 100644
--- 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
index 38e7264..e3673bc 100644
--- 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);