From 6611821d2ec3a1678519ca4dd529c45511194b1e Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Mon, 20 Apr 2015 13:50:50 -0400
Subject: [PATCH] Shapes now animate height/width on transition

---
 src/definitions/modules/shape.js           | 69 +++++++++++++---------
 src/definitions/modules/shape.less         |  4 +-
 src/themes/default/modules/shape.variables |  7 ++-
 3 files changed, 49 insertions(+), 31 deletions(-)

diff --git a/src/definitions/modules/shape.js b/src/definitions/modules/shape.js
index 0d6dd7658..c6baa88ca 100644
--- a/src/definitions/modules/shape.js
+++ b/src/definitions/modules/shape.js
@@ -216,6 +216,20 @@ $.fn.shape = function(parameters) {
             ;
           },
 
+          currentStageSize: function() {
+            var
+              $activeSide = $module.find('.' + settings.className.active),
+              width       = $activeSide.outerWidth(true),
+              height      = $activeSide.outerHeight(true)
+            ;
+            $module
+              .css({
+                width: width,
+                height: height
+              })
+            ;
+          },
+
           stageSize: function() {
             var
               $clone      = $module.clone().addClass(className.loading),
@@ -227,12 +241,13 @@ $.fn.shape = function(parameters) {
                   : $clone.find(selector.side).first(),
               newSize = {}
             ;
+            module.set.currentStageSize();
             $activeSide.removeClass(className.active);
             $nextSide.addClass(className.active);
             $clone.insertAfter($module);
             newSize = {
-              width  : $nextSide.outerWidth(),
-              height : $nextSide.outerHeight()
+              width  : $nextSide.outerWidth(true),
+              height : $nextSide.outerHeight(true)
             };
             $clone.remove();
             $module
@@ -371,8 +386,8 @@ $.fn.shape = function(parameters) {
             up: function() {
               var
                 translate = {
-                  y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
-                  z: -($activeSide.outerHeight() / 2)
+                  y: -(($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
+                  z: -($activeSide.outerHeight(true) / 2)
                 }
               ;
               return {
@@ -383,8 +398,8 @@ $.fn.shape = function(parameters) {
             down: function() {
               var
                 translate = {
-                  y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
-                  z: -($activeSide.outerHeight() / 2)
+                  y: -(($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
+                  z: -($activeSide.outerHeight(true) / 2)
                 }
               ;
               return {
@@ -395,8 +410,8 @@ $.fn.shape = function(parameters) {
             left: function() {
               var
                 translate = {
-                  x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2),
-                  z : -($activeSide.outerWidth() / 2)
+                  x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2),
+                  z : -($activeSide.outerWidth(true) / 2)
                 }
               ;
               return {
@@ -407,8 +422,8 @@ $.fn.shape = function(parameters) {
             right: function() {
               var
                 translate = {
-                  x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2),
-                  z : -($activeSide.outerWidth() / 2)
+                  x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2),
+                  z : -($activeSide.outerWidth(true) / 2)
                 }
               ;
               return {
@@ -419,7 +434,7 @@ $.fn.shape = function(parameters) {
             over: function() {
               var
                 translate = {
-                  x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
+                  x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2)
                 }
               ;
               return {
@@ -430,7 +445,7 @@ $.fn.shape = function(parameters) {
             back: function() {
               var
                 translate = {
-                  x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
+                  x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2)
                 }
               ;
               return {
@@ -471,10 +486,10 @@ $.fn.shape = function(parameters) {
           above: function() {
             var
               box = {
-                origin : (($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
+                origin : (($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
                 depth  : {
-                  active : ($nextSide.outerHeight() / 2),
-                  next   : ($activeSide.outerHeight() / 2)
+                  active : ($nextSide.outerHeight(true) / 2),
+                  next   : ($activeSide.outerHeight(true) / 2)
                 }
               }
             ;
@@ -497,10 +512,10 @@ $.fn.shape = function(parameters) {
           below: function() {
             var
               box = {
-                origin : (($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
+                origin : (($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
                 depth  : {
-                  active : ($nextSide.outerHeight() / 2),
-                  next   : ($activeSide.outerHeight() / 2)
+                  active : ($nextSide.outerHeight(true) / 2),
+                  next   : ($activeSide.outerHeight(true) / 2)
                 }
               }
             ;
@@ -523,10 +538,10 @@ $.fn.shape = function(parameters) {
           left: function() {
             var
               box = {
-                origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2),
+                origin : ( ( $activeSide.outerWidth(true) - $nextSide.outerWidth(true) ) / 2),
                 depth  : {
-                  active : ($nextSide.outerWidth() / 2),
-                  next   : ($activeSide.outerWidth() / 2)
+                  active : ($nextSide.outerWidth(true) / 2),
+                  next   : ($activeSide.outerWidth(true) / 2)
                 }
               }
             ;
@@ -549,10 +564,10 @@ $.fn.shape = function(parameters) {
           right: function() {
             var
               box = {
-                origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2),
+                origin : ( ( $activeSide.outerWidth(true) - $nextSide.outerWidth(true) ) / 2),
                 depth  : {
-                  active : ($nextSide.outerWidth() / 2),
-                  next   : ($activeSide.outerWidth() / 2)
+                  active : ($nextSide.outerWidth(true) / 2),
+                  next   : ($activeSide.outerWidth(true) / 2)
                 }
               }
             ;
@@ -575,10 +590,10 @@ $.fn.shape = function(parameters) {
           behind: function() {
             var
               box = {
-                origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2),
+                origin : ( ( $activeSide.outerWidth(true) - $nextSide.outerWidth(true) ) / 2),
                 depth  : {
-                  active : ($nextSide.outerWidth() / 2),
-                  next   : ($activeSide.outerWidth() / 2)
+                  active : ($nextSide.outerWidth(true) / 2),
+                  next   : ($activeSide.outerWidth(true) / 2)
                 }
               }
             ;
diff --git a/src/definitions/modules/shape.less b/src/definitions/modules/shape.less
index 28f62d3d5..4b1dfb1f4 100755
--- a/src/definitions/modules/shape.less
+++ b/src/definitions/modules/shape.less
@@ -28,6 +28,7 @@
   position: relative;
   display: @display;
   perspective: @perspective;
+  transition: @transition;
 }
 
 .ui.shape .sides {
@@ -128,9 +129,6 @@
       CSS
 ---------------*/
 
-.ui.shape.animating {
-  transition: @transition;
-}
 .ui.shape.animating .sides {
   position: absolute;
 }
diff --git a/src/themes/default/modules/shape.variables b/src/themes/default/modules/shape.variables
index a165b2a1d..971c28969 100644
--- a/src/themes/default/modules/shape.variables
+++ b/src/themes/default/modules/shape.variables
@@ -13,7 +13,12 @@
 @hiddenSideOpacity: 0.4;
 @animatingZIndex: 100;
 
-@transition: all @duration @easing;
+@transition:
+  transform @duration @easing,
+  left @duration @easing,
+  width @duration @easing,
+  height @duration @easing,
+;
 @sideTransition: opacity @duration @easing;
 @backfaceVisibility: hidden;