From a1a4ad4fae6c5b15f48fc5865bc779dce3fd9834 Mon Sep 17 00:00:00 2001
From: Brett Fowle <brettfowle@gmail.com>
Date: Thu, 17 Jul 2014 20:56:15 -0400
Subject: [PATCH 1/2] ng-animation SASS/Compass format

---
 sass/ng-animation-compass.scss | 835 +++++++++++++++++++++++++++++++++
 1 file changed, 835 insertions(+)
 create mode 100644 sass/ng-animation-compass.scss

diff --git a/sass/ng-animation-compass.scss b/sass/ng-animation-compass.scss
new file mode 100644
index 0000000..0a07762
--- /dev/null
+++ b/sass/ng-animation-compass.scss
@@ -0,0 +1,835 @@
+@import "compass/css3/transform";
+@import "compass/css3/transition";
+
+/* ------------------------------------------- */
+/* Mixins
+/* ------------------------------------------- */
+
+@mixin transitionDuration($duration) {
+    @include transition-duration($duration);
+}
+
+@mixin easingTimingFunction() {
+    @include single-transition(all, 0, cubic-bezier(0.25, 0.46, 0.45, 0.94));
+    @include transition-timing-function(cubic-bezier(0.25, 0.46, 0.45, 0.94)); 
+}
+
+@mixin bouncyTimingFunction() {
+    @include single-transition(all, 0, cubic-bezier(0.175, 0.885, 0.32, 1));
+    @include transition-timing-function(cubic-bezier(0.175, 0.885, 0.32, 1)); 
+}
+
+@mixin easingOutQuadTimingFunction() {
+    @include single-transition(all, 0, cubic-bezier(0.25, 0.46, 0.45, 0.94));
+    @include transition-timing-function(cubic-bezier(0.25, 0.46, 0.45, 0.94)); 
+}
+
+@mixin transform($value) {
+    @include transform($value); 
+}
+
+/* ------------------------------------------- */
+/* Toggle Fade  
+/* ------------------------------------------- */
+
+.toggle {
+    @include easingTimingFunction();
+    &.ng-enter {
+        opacity: 0;
+        @include transitionDuration(250ms);
+    }
+
+    &.ng-enter-active {
+        opacity: 1; 
+    }
+
+    &.ng-leave {
+        opacity: 1;
+        @include transitionDuration(250ms);
+    }
+
+    &.ng-leave-active {
+        opacity: 0; 
+    }
+
+    // Hide
+    &.ng-hide-add {
+        @include transitionDuration(250ms);
+        opacity:1;      
+    }   
+    &.ng-hide-add.ng-hide-add-active {
+        opacity:0;
+    }
+
+    // Show
+    &.ng-hide-remove {
+        @include transitionDuration(250ms);
+        display:block!important;
+        opacity:0;
+    }
+    &.ng-hide-remove.ng-hide-remove-active {
+        opacity:1;
+    }
+}
+
+
+/* ------------------------------------------- */
+/* Slide Top 
+/* ------------------------------------------- */
+
+.slide-top {
+    @include easingTimingFunction();
+    &.ng-enter {
+        @include transform(translateY(60px)); 
+        @include transitionDuration(250ms);
+        opacity: 0;
+    }
+
+    &.ng-enter-active {
+        @include transform(translateY(0));
+        opacity: 1; 
+    }
+
+    &.ng-leave {
+        @include transform(translateY(0));
+        @include transitionDuration(250ms);
+        opacity: 1;
+    }
+
+    &.ng-leave-active {
+        @include transform(translateY(60px)); 
+        opacity: 0; 
+    }
+
+    // Hide
+    &.ng-hide-add {
+        @include transform(translateY(0));
+        @include transitionDuration(250ms);
+        opacity:1;      
+    }   
+    &.ng-hide-add.ng-hide-add-active {
+        @include transform(translateY(60px)); 
+        opacity:0;
+    }
+
+    // Show
+    &.ng-hide-remove {
+        @include transform(translateY(60px)); 
+        @include transitionDuration(250ms);
+        display:block!important;
+        opacity:0;
+    }
+    &.ng-hide-remove.ng-hide-remove-active {
+        @include transform(translateY(0));
+        opacity:1;
+    }
+}
+
+
+
+/* ------------------------------------------- */
+/* Slide Rigth 
+/* ------------------------------------------- */
+
+.slide-right {
+    @include easingTimingFunction();
+    &.ng-enter {
+        @include transform(translateX(60px)); 
+        @include transitionDuration(250ms);
+        opacity: 0;
+    }
+
+    &.ng-enter-active {
+        @include transform(translateX(0));
+        opacity: 1; 
+    }
+
+    &.ng-leave {
+        @include transform(translateX(0));
+        @include transitionDuration(250ms);
+        opacity: 1;
+    }
+
+    &.ng-leave-active {
+        @include transform(translateX(60px)); 
+        opacity: 0; 
+    }
+
+    // Hide
+    &.ng-hide-add {
+        @include transform(translateX(0));
+        @include transitionDuration(250ms);
+        opacity:1;      
+    }   
+    &.ng-hide-add.ng-hide-add-active {
+        @include transform(translateX(60px)); 
+        opacity:0;
+    }
+
+    // Show
+    &.ng-hide-remove {
+        @include transform(translateX(60px)); 
+        @include transitionDuration(250ms);
+        display:block!important;
+        opacity:0;
+    }
+    &.ng-hide-remove.ng-hide-remove-active {
+        @include transform(translateX(0));
+        opacity:1;
+    }
+}
+
+
+
+/* ------------------------------------------- */
+/* Slide Left 
+/* ------------------------------------------- */
+
+.slide-left {
+    @include easingTimingFunction();
+    &.ng-enter {
+        @include transform(translateX(-60px));
+        @include transitionDuration(250ms);
+        opacity: 0;
+    }
+
+    &.ng-enter-active {
+        @include transform(translateX(0));
+        opacity: 1; 
+    }
+
+    &.ng-leave {
+        @include transform(translateX(0));
+        @include transitionDuration(250ms);
+        opacity: 1;
+    }
+
+    &.ng-leave-active {
+        @include transform(translateX(-60px));
+        opacity: 0; 
+    }
+
+    // Hide
+    &.ng-hide-add {
+        @include transform(translateX(0));
+        @include transitionDuration(250ms);
+        opacity:1;      
+    }   
+    &.ng-hide-add.ng-hide-add-active {
+        @include transform(translateX(-60px));
+        opacity:0;
+    }
+
+    // Show
+    &.ng-hide-remove {
+        @include transform(translateX(-60px)); 
+        @include transitionDuration(250ms);
+        display:block!important;
+        opacity:0;
+    }
+    &.ng-hide-remove.ng-hide-remove-active {
+        @include transform(translateX(0));
+        opacity:1;
+    }
+}
+
+
+/* ------------------------------------------- */
+/* Slide Down
+/* ------------------------------------------- */
+
+.slide-down {
+    @include easingTimingFunction();
+
+    &.ng-enter {
+        @include transform(translateY(-60px)); 
+        @include transitionDuration(250ms);
+        opacity: 0;
+    }
+
+    &.ng-enter-active {
+        @include transform(translateY(0));
+        opacity: 1; 
+    }
+
+    &.ng-leave {
+        @include transform(translateY(0));
+        @include transitionDuration(250ms);
+        opacity: 1;
+    }
+
+    &.ng-leave-active {
+        @include transform(translateY(-60px)); 
+        opacity: 0; 
+    }
+
+    // Hide
+    &.ng-hide-add {
+        @include transform(translateY(0));
+        @include transitionDuration(250ms);
+        opacity:1;      
+    }   
+    &.ng-hide-add.ng-hide-add-active {
+        @include transform(translateY(-60px)); 
+        opacity:0;
+    }
+
+    // Show
+    &.ng-hide-remove {
+        @include transform(translateY(-60px)); 
+        @include transitionDuration(250ms);
+        display:block!important;
+        opacity:0;
+    }
+    &.ng-hide-remove.ng-hide-remove-active {
+        @include transform(translateY(0));
+        opacity:1;
+    }
+    
+}
+
+
+/* ------------------------------------------- */
+/* Bouncy Slide Top 
+/* ------------------------------------------- */
+
+.bouncy-slide-top {
+    @include bouncyTimingFunction();
+
+    &.ng-enter {
+        @include transform(translateY(240px));
+        @include transitionDuration(250ms);
+        opacity: 0;
+    }
+
+    &.ng-enter-active {
+        @include transform(translateY(0));
+        opacity: 1; 
+    }
+
+    &.ng-leave {
+        @include transform(translateY(0));
+        @include transitionDuration(250ms);
+        opacity: 1;
+    }
+
+    &.ng-leave-active {
+        @include transform(translateY(240px)); 
+        opacity: 0; 
+    }
+
+    // Hide
+    &.ng-hide-add {
+        @include transform(translateY(0));
+        @include transitionDuration(250ms);
+        opacity:1;      
+    }   
+    &.ng-hide-add.ng-hide-add-active {
+        @include transform(translateY(240px)); 
+        opacity:0;
+    }
+
+    // Show
+    &.ng-hide-remove {
+        @include transform(translateY(240px)); 
+        @include transitionDuration(250ms);
+        display:block!important;
+        opacity:0;
+    }
+    &.ng-hide-remove.ng-hide-remove-active {
+        @include transform(translateY(0));
+        opacity:1;
+    }
+}
+
+
+/* ------------------------------------------- */
+/* Bouncy Slide Rigth 
+/* ------------------------------------------- */
+
+.bouncy-slide-right {
+    @include bouncyTimingFunction();
+
+    &.ng-enter {
+        @include transform(translateX(240px)); 
+        @include transitionDuration(250ms);
+        opacity: 0;
+    }
+
+    &.ng-enter-active {
+        @include transform(translateX(0));
+        opacity: 1; 
+    }
+
+    &.ng-leave {
+        @include transform(translateX(0));
+        @include transitionDuration(250ms);
+        opacity: 1;
+    }
+
+    &.ng-leave-active {
+        @include transform(translateX(240px));
+        opacity: 0; 
+    }
+
+    // Hide
+    &.ng-hide-add {
+        @include transform(translateX(0));
+        @include transitionDuration(250ms);
+        opacity:1;      
+    }   
+    &.ng-hide-add.ng-hide-add-active {
+        @include transform(translateX(240px)); 
+        opacity:0;
+    }
+
+    // Show
+    &.ng-hide-remove {
+        @include transform(translateX(240px)); 
+        @include transitionDuration(250ms);
+        display:block!important;
+        opacity:0;
+    }
+    &.ng-hide-remove.ng-hide-remove-active {
+        @include transform(translateX(0));
+        opacity:1;
+    }
+}
+
+
+
+/* ------------------------------------------- */
+/* Bouncy Slide Left 
+/* ------------------------------------------- */
+
+.bouncy-slide-left {
+    @include bouncyTimingFunction();
+
+    &.ng-enter {
+        @include transform(translateX(-240px));
+        @include transitionDuration(250ms);
+        opacity: 0; 
+    }
+
+    &.ng-enter-active {
+        @include transform(translateX(0));
+        opacity: 1; 
+    }
+
+    &.ng-leave {
+        @include transform(translateX(0));
+        @include transitionDuration(250ms);
+        opacity: 1;
+    }
+
+    &.ng-leave-active {
+        @include transform(translateX(-240px));
+        opacity: 0; 
+    }
+
+    // Hide
+    &.ng-hide-add {
+        @include transform(translateX(0));
+        @include transitionDuration(250ms);
+        opacity:1;      
+    }   
+    &.ng-hide-add.ng-hide-add-active {
+        @include transform(translateX(-240px)); 
+        opacity:0;
+    }
+
+    // Show
+    &.ng-hide-remove {
+        @include transform(translateX(-240px)); 
+        @include transitionDuration(250ms);
+        display:block!important;
+        opacity:0;
+    }
+    &.ng-hide-remove.ng-hide-remove-active {
+        @include transform(translateX(0));
+        opacity:1;
+    }
+}
+
+
+/* ------------------------------------------- */
+/* Bouncy Slide Down
+/* ------------------------------------------- */
+
+.bouncy-slide-down {
+    @include bouncyTimingFunction();
+
+    &.ng-enter {
+        @include transform(translateY(-240px));
+        @include transitionDuration(250ms);
+        opacity: 0;
+    }
+
+    &.ng-enter-active {
+        @include transform(translateY(0));
+        opacity: 1; 
+    }
+
+    &.ng-leave {
+        @include transform(translateY(0));
+        @include transitionDuration(250ms);
+        opacity: 1;
+    }
+
+    &.ng-leave-active {
+        @include transform(translateY(-240px));
+        opacity: 0; 
+    }
+
+    // Hide
+    &.ng-hide-add {
+        @include transform(translateY(0));
+        @include transitionDuration(250ms);
+        opacity:1;      
+    }   
+    &.ng-hide-add.ng-hide-add-active {
+        @include transform(translateY(-240px)); 
+        opacity:0;
+    }
+
+    // Show
+    &.ng-hide-remove {
+        @include transform(translateY(-240px)); 
+        @include transitionDuration(250ms);
+        display:block!important;
+        opacity:0;
+    }
+    &.ng-hide-remove.ng-hide-remove-active {
+        @include transform(translateY(0));
+        opacity:1;
+    }
+}
+
+
+
+
+/* ------------------------------------------- */
+/* Scale Fade 
+/* ------------------------------------------- */
+
+.scale-fade {
+    @include easingTimingFunction();
+
+    &.ng-enter {
+        @include transform(scale(0.7));
+        @include transitionDuration(250ms);
+        opacity: 0;
+    }
+
+    &.ng-enter-active {
+        @include transform(scale(1));
+        opacity: 1; 
+    }
+
+    &.ng-leave {
+        @include transform(scale(1));
+        @include transitionDuration(250ms);
+        opacity: 1;
+    }
+
+    &.ng-leave-active {
+        @include transform(scale(0.7)); 
+        opacity: 0; 
+    }
+
+    // Hide
+    &.ng-hide-add {
+        @include transform(scale(1));
+        @include transitionDuration(250ms);
+        opacity:1;      
+    }   
+    &.ng-hide-add.ng-hide-add-active {
+        @include transform(scale(0.7)); 
+        opacity:0;
+    }
+
+    // Show
+    &.ng-hide-remove {
+        @include transform(scale(0.7));
+        @include transitionDuration(250ms);
+        display:block!important;
+        opacity:0;
+    }
+    &.ng-hide-remove.ng-hide-remove-active {
+        @include transform(scale(1));
+        opacity:1;
+    }
+}
+
+
+/* ------------------------------------------- */
+/* Spin Fade 
+/* ------------------------------------------- */
+
+.spin-toggle {
+    @include easingTimingFunction();
+
+    &.ng-enter {
+        @include transform(rotate(225deg));
+        @include transitionDuration(250ms);
+        opacity: 0;
+    }
+
+    &.ng-enter-active {
+        @include transform(rotate(0deg));
+        opacity: 1; 
+    }
+
+    &.ng-leave {
+        @include transform(rotate(0deg));
+        @include transitionDuration(250ms);
+        opacity: 1;
+    }
+
+    &.ng-leave-active {
+        @include transform(rotate(90deg)); 
+        opacity: 0; 
+    }
+
+    // Hide
+    &.ng-hide-add {
+        @include transform(rotate(0deg));
+        @include transitionDuration(250ms);
+        opacity:1;      
+    }   
+    &.ng-hide-add.ng-hide-add-active {
+        @include transform(rotate(90deg)); 
+        opacity:0;
+    }
+
+    // Show
+    &.ng-hide-remove {
+        @include transform(rotate(225deg));
+        @include transitionDuration(250ms);
+        display:block!important;
+        opacity:0;
+    }
+    &.ng-hide-remove.ng-hide-remove-active {
+        @include transform(rotate(0deg));
+        opacity:1;
+    }
+}
+
+
+
+/* ------------------------------------------- */
+/* Scale in Fade 
+/* ------------------------------------------- */
+
+.scale-fade-in {
+    @include easingOutQuadTimingFunction();
+
+    &.ng-enter {
+        @include transform(scale(3));
+        @include transitionDuration(250ms);
+        opacity: 0;
+    }
+
+    &.ng-enter-active {
+        @include transform(scale(1));
+        opacity: 1; 
+    }
+
+    &.ng-leave {
+        @include transform(scale(1));
+        @include transitionDuration(250ms);
+        opacity: 1;
+    }
+
+    &.ng-leave-active {
+        @include transform(scale(3));
+        opacity: 0; 
+    }
+
+    // Hide
+    &.ng-hide-add {
+        @include transform(scale(1));
+        @include transitionDuration(250ms);
+        opacity:1;      
+    }   
+    &.ng-hide-add.ng-hide-add-active {
+        @include transform(scale(3));
+        opacity:0;
+    }
+
+    // Show
+    &.ng-hide-remove {
+        @include transform(scale(3));
+        @include transitionDuration(250ms);
+        display:block!important;
+        opacity:0;
+    }
+    &.ng-hide-remove.ng-hide-remove-active {
+        @include transform(scale(1));
+        opacity:1;
+    }
+}
+
+
+
+/* ------------------------------------------- */
+/* Bouncy Scale in Fade 
+/* ------------------------------------------- */
+
+.bouncy-scale-in {
+    @include bouncyTimingFunction();
+
+    &.ng-enter {
+        @include transform(scale(3));
+        @include transitionDuration(450ms);
+        opacity: 0;
+    }
+
+    &.ng-enter-active {
+        @include transform(scale(1));
+        opacity: 1; 
+    }
+
+    &.ng-leave {
+        @include transform(scale(1));
+        @include transitionDuration(450ms);
+        opacity: 1;
+    }
+
+    &.ng-leave-active {
+        @include transform(scale(3));
+        opacity: 0; 
+    }
+
+    // Hide
+    &.ng-hide-add {
+        @include transform(scale(1));
+        @include transitionDuration(450ms);
+        opacity:1;      
+    }   
+    &.ng-hide-add.ng-hide-add-active {
+        @include transform(scale(3));
+        opacity:0;
+    }
+
+    // Show
+    &.ng-hide-remove {
+        @include transform(scale(3));
+        @include transitionDuration(450ms);
+        display:block!important;
+        opacity:0;
+    }
+    &.ng-hide-remove.ng-hide-remove-active {
+        @include transform(scale(1));
+        opacity:1;
+    }
+}
+
+
+
+/* ------------------------------------------- */
+/* Flip In 
+/* ------------------------------------------- */
+
+.flip-in {
+    @include easingTimingFunction();
+
+    &.ng-enter {
+        @include transform(perspective(300px) rotateX(90deg));
+        @include transitionDuration(550ms);
+        opacity: 0.7;
+    }
+
+    &.ng-enter-active {
+        @include transform(perspective(300px) rotateX(0deg));
+        opacity: 1; 
+    }
+
+    &.ng-leave {
+        @include transform(perspective(300px) rotateX(0deg));
+        @include transitionDuration(550ms);
+        opacity: 1;
+    }
+
+    &.ng-leave-active {
+        @include transform(perspective(300px) rotateX(135deg)); 
+        opacity: 0.7;   
+    }
+
+    // Hide
+    &.ng-hide-add {
+        @include transform(perspective(300px) rotateX(0deg));
+        @include transitionDuration(550ms);
+        opacity:1;      
+    }   
+    &.ng-hide-add.ng-hide-add-active {
+        @include transform(perspective(300px) rotateX(135deg)); 
+        opacity:0;
+    }
+
+    // Show
+    &.ng-hide-remove {
+        @include transform(perspective(300px) rotateX(90deg));
+        @include transitionDuration(550ms);
+        display:block!important;
+        opacity:0;
+    }
+    &.ng-hide-remove.ng-hide-remove-active {
+        @include transform(perspective(300px) rotateX(0deg));
+        opacity:1;
+    }
+}
+
+
+/* ------------------------------------------- */
+/* Rotate In 
+/* ------------------------------------------- */
+
+.rotate-in {
+    @include bouncyTimingFunction();
+
+    &.ng-enter {
+        @include transform(perspective(300px) rotateY(40deg));
+        @include transitionDuration(550ms);
+        opacity: 0.7;
+    }
+
+    &.ng-enter-active {
+        @include transform(perspective(300px) rotateY(0deg));
+        opacity: 1; 
+    }
+
+    &.ng-leave {
+        @include transform(perspective(300px) rotateY(0deg));
+        @include transitionDuration(550ms);
+        opacity: 1;
+    }
+
+    &.ng-leave-active {
+        @include transform(perspective(300px) rotateY(-40deg)); 
+        opacity: 0.7;   
+    }
+
+    // Hide
+    &.ng-hide-add {
+        @include transform(perspective(300px) rotateY(0deg));
+        @include transitionDuration(550ms);
+        opacity:1;      
+    }   
+    &.ng-hide-add.ng-hide-add-active {
+        @include transform(perspective(300px) rotateY(-40deg)); 
+        opacity:0;
+    }
+
+    // Show
+    &.ng-hide-remove {
+        @include transform(perspective(300px) rotateY(40deg));
+        @include transitionDuration(550ms);
+        display:block!important;
+        opacity:0;
+    }
+    &.ng-hide-remove.ng-hide-remove-active {
+        @include transform(perspective(300px) rotateY(0deg));
+        opacity:1;
+    }
+}

From 9e303536195649e3ca48181d289bae749744832a Mon Sep 17 00:00:00 2001
From: Brett Fowle <brettfowle@gmail.com>
Date: Thu, 17 Jul 2014 21:04:23 -0400
Subject: [PATCH 2/2] update transform mixin to be unique from Compass
 transform()

---
 sass/ng-animation-compass.scss | 226 ++++++++++++++++-----------------
 1 file changed, 113 insertions(+), 113 deletions(-)

diff --git a/sass/ng-animation-compass.scss b/sass/ng-animation-compass.scss
index 0a07762..e16e075 100644
--- a/sass/ng-animation-compass.scss
+++ b/sass/ng-animation-compass.scss
@@ -24,7 +24,7 @@
     @include transition-timing-function(cubic-bezier(0.25, 0.46, 0.45, 0.94)); 
 }
 
-@mixin transform($value) {
+@mixin transformValue($value) {
     @include transform($value); 
 }
 
@@ -80,47 +80,47 @@
 .slide-top {
     @include easingTimingFunction();
     &.ng-enter {
-        @include transform(translateY(60px)); 
+        @include transformValue(translateY(60px)); 
         @include transitionDuration(250ms);
         opacity: 0;
     }
 
     &.ng-enter-active {
-        @include transform(translateY(0));
+        @include transformValue(translateY(0));
         opacity: 1; 
     }
 
     &.ng-leave {
-        @include transform(translateY(0));
+        @include transformValue(translateY(0));
         @include transitionDuration(250ms);
         opacity: 1;
     }
 
     &.ng-leave-active {
-        @include transform(translateY(60px)); 
+        @include transformValue(translateY(60px)); 
         opacity: 0; 
     }
 
     // Hide
     &.ng-hide-add {
-        @include transform(translateY(0));
+        @include transformValue(translateY(0));
         @include transitionDuration(250ms);
         opacity:1;      
     }   
     &.ng-hide-add.ng-hide-add-active {
-        @include transform(translateY(60px)); 
+        @include transformValue(translateY(60px)); 
         opacity:0;
     }
 
     // Show
     &.ng-hide-remove {
-        @include transform(translateY(60px)); 
+        @include transformValue(translateY(60px)); 
         @include transitionDuration(250ms);
         display:block!important;
         opacity:0;
     }
     &.ng-hide-remove.ng-hide-remove-active {
-        @include transform(translateY(0));
+        @include transformValue(translateY(0));
         opacity:1;
     }
 }
@@ -134,47 +134,47 @@
 .slide-right {
     @include easingTimingFunction();
     &.ng-enter {
-        @include transform(translateX(60px)); 
+        @include transformValue(translateX(60px)); 
         @include transitionDuration(250ms);
         opacity: 0;
     }
 
     &.ng-enter-active {
-        @include transform(translateX(0));
+        @include transformValue(translateX(0));
         opacity: 1; 
     }
 
     &.ng-leave {
-        @include transform(translateX(0));
+        @include transformValue(translateX(0));
         @include transitionDuration(250ms);
         opacity: 1;
     }
 
     &.ng-leave-active {
-        @include transform(translateX(60px)); 
+        @include transformValue(translateX(60px)); 
         opacity: 0; 
     }
 
     // Hide
     &.ng-hide-add {
-        @include transform(translateX(0));
+        @include transformValue(translateX(0));
         @include transitionDuration(250ms);
         opacity:1;      
     }   
     &.ng-hide-add.ng-hide-add-active {
-        @include transform(translateX(60px)); 
+        @include transformValue(translateX(60px)); 
         opacity:0;
     }
 
     // Show
     &.ng-hide-remove {
-        @include transform(translateX(60px)); 
+        @include transformValue(translateX(60px)); 
         @include transitionDuration(250ms);
         display:block!important;
         opacity:0;
     }
     &.ng-hide-remove.ng-hide-remove-active {
-        @include transform(translateX(0));
+        @include transformValue(translateX(0));
         opacity:1;
     }
 }
@@ -188,47 +188,47 @@
 .slide-left {
     @include easingTimingFunction();
     &.ng-enter {
-        @include transform(translateX(-60px));
+        @include transformValue(translateX(-60px));
         @include transitionDuration(250ms);
         opacity: 0;
     }
 
     &.ng-enter-active {
-        @include transform(translateX(0));
+        @include transformValue(translateX(0));
         opacity: 1; 
     }
 
     &.ng-leave {
-        @include transform(translateX(0));
+        @include transformValue(translateX(0));
         @include transitionDuration(250ms);
         opacity: 1;
     }
 
     &.ng-leave-active {
-        @include transform(translateX(-60px));
+        @include transformValue(translateX(-60px));
         opacity: 0; 
     }
 
     // Hide
     &.ng-hide-add {
-        @include transform(translateX(0));
+        @include transformValue(translateX(0));
         @include transitionDuration(250ms);
         opacity:1;      
     }   
     &.ng-hide-add.ng-hide-add-active {
-        @include transform(translateX(-60px));
+        @include transformValue(translateX(-60px));
         opacity:0;
     }
 
     // Show
     &.ng-hide-remove {
-        @include transform(translateX(-60px)); 
+        @include transformValue(translateX(-60px)); 
         @include transitionDuration(250ms);
         display:block!important;
         opacity:0;
     }
     &.ng-hide-remove.ng-hide-remove-active {
-        @include transform(translateX(0));
+        @include transformValue(translateX(0));
         opacity:1;
     }
 }
@@ -242,47 +242,47 @@
     @include easingTimingFunction();
 
     &.ng-enter {
-        @include transform(translateY(-60px)); 
+        @include transformValue(translateY(-60px)); 
         @include transitionDuration(250ms);
         opacity: 0;
     }
 
     &.ng-enter-active {
-        @include transform(translateY(0));
+        @include transformValue(translateY(0));
         opacity: 1; 
     }
 
     &.ng-leave {
-        @include transform(translateY(0));
+        @include transformValue(translateY(0));
         @include transitionDuration(250ms);
         opacity: 1;
     }
 
     &.ng-leave-active {
-        @include transform(translateY(-60px)); 
+        @include transformValue(translateY(-60px)); 
         opacity: 0; 
     }
 
     // Hide
     &.ng-hide-add {
-        @include transform(translateY(0));
+        @include transformValue(translateY(0));
         @include transitionDuration(250ms);
         opacity:1;      
     }   
     &.ng-hide-add.ng-hide-add-active {
-        @include transform(translateY(-60px)); 
+        @include transformValue(translateY(-60px)); 
         opacity:0;
     }
 
     // Show
     &.ng-hide-remove {
-        @include transform(translateY(-60px)); 
+        @include transformValue(translateY(-60px)); 
         @include transitionDuration(250ms);
         display:block!important;
         opacity:0;
     }
     &.ng-hide-remove.ng-hide-remove-active {
-        @include transform(translateY(0));
+        @include transformValue(translateY(0));
         opacity:1;
     }
     
@@ -297,47 +297,47 @@
     @include bouncyTimingFunction();
 
     &.ng-enter {
-        @include transform(translateY(240px));
+        @include transformValue(translateY(240px));
         @include transitionDuration(250ms);
         opacity: 0;
     }
 
     &.ng-enter-active {
-        @include transform(translateY(0));
+        @include transformValue(translateY(0));
         opacity: 1; 
     }
 
     &.ng-leave {
-        @include transform(translateY(0));
+        @include transformValue(translateY(0));
         @include transitionDuration(250ms);
         opacity: 1;
     }
 
     &.ng-leave-active {
-        @include transform(translateY(240px)); 
+        @include transformValue(translateY(240px)); 
         opacity: 0; 
     }
 
     // Hide
     &.ng-hide-add {
-        @include transform(translateY(0));
+        @include transformValue(translateY(0));
         @include transitionDuration(250ms);
         opacity:1;      
     }   
     &.ng-hide-add.ng-hide-add-active {
-        @include transform(translateY(240px)); 
+        @include transformValue(translateY(240px)); 
         opacity:0;
     }
 
     // Show
     &.ng-hide-remove {
-        @include transform(translateY(240px)); 
+        @include transformValue(translateY(240px)); 
         @include transitionDuration(250ms);
         display:block!important;
         opacity:0;
     }
     &.ng-hide-remove.ng-hide-remove-active {
-        @include transform(translateY(0));
+        @include transformValue(translateY(0));
         opacity:1;
     }
 }
@@ -351,47 +351,47 @@
     @include bouncyTimingFunction();
 
     &.ng-enter {
-        @include transform(translateX(240px)); 
+        @include transformValue(translateX(240px)); 
         @include transitionDuration(250ms);
         opacity: 0;
     }
 
     &.ng-enter-active {
-        @include transform(translateX(0));
+        @include transformValue(translateX(0));
         opacity: 1; 
     }
 
     &.ng-leave {
-        @include transform(translateX(0));
+        @include transformValue(translateX(0));
         @include transitionDuration(250ms);
         opacity: 1;
     }
 
     &.ng-leave-active {
-        @include transform(translateX(240px));
+        @include transformValue(translateX(240px));
         opacity: 0; 
     }
 
     // Hide
     &.ng-hide-add {
-        @include transform(translateX(0));
+        @include transformValue(translateX(0));
         @include transitionDuration(250ms);
         opacity:1;      
     }   
     &.ng-hide-add.ng-hide-add-active {
-        @include transform(translateX(240px)); 
+        @include transformValue(translateX(240px)); 
         opacity:0;
     }
 
     // Show
     &.ng-hide-remove {
-        @include transform(translateX(240px)); 
+        @include transformValue(translateX(240px)); 
         @include transitionDuration(250ms);
         display:block!important;
         opacity:0;
     }
     &.ng-hide-remove.ng-hide-remove-active {
-        @include transform(translateX(0));
+        @include transformValue(translateX(0));
         opacity:1;
     }
 }
@@ -406,47 +406,47 @@
     @include bouncyTimingFunction();
 
     &.ng-enter {
-        @include transform(translateX(-240px));
+        @include transformValue(translateX(-240px));
         @include transitionDuration(250ms);
         opacity: 0; 
     }
 
     &.ng-enter-active {
-        @include transform(translateX(0));
+        @include transformValue(translateX(0));
         opacity: 1; 
     }
 
     &.ng-leave {
-        @include transform(translateX(0));
+        @include transformValue(translateX(0));
         @include transitionDuration(250ms);
         opacity: 1;
     }
 
     &.ng-leave-active {
-        @include transform(translateX(-240px));
+        @include transformValue(translateX(-240px));
         opacity: 0; 
     }
 
     // Hide
     &.ng-hide-add {
-        @include transform(translateX(0));
+        @include transformValue(translateX(0));
         @include transitionDuration(250ms);
         opacity:1;      
     }   
     &.ng-hide-add.ng-hide-add-active {
-        @include transform(translateX(-240px)); 
+        @include transformValue(translateX(-240px)); 
         opacity:0;
     }
 
     // Show
     &.ng-hide-remove {
-        @include transform(translateX(-240px)); 
+        @include transformValue(translateX(-240px)); 
         @include transitionDuration(250ms);
         display:block!important;
         opacity:0;
     }
     &.ng-hide-remove.ng-hide-remove-active {
-        @include transform(translateX(0));
+        @include transformValue(translateX(0));
         opacity:1;
     }
 }
@@ -460,47 +460,47 @@
     @include bouncyTimingFunction();
 
     &.ng-enter {
-        @include transform(translateY(-240px));
+        @include transformValue(translateY(-240px));
         @include transitionDuration(250ms);
         opacity: 0;
     }
 
     &.ng-enter-active {
-        @include transform(translateY(0));
+        @include transformValue(translateY(0));
         opacity: 1; 
     }
 
     &.ng-leave {
-        @include transform(translateY(0));
+        @include transformValue(translateY(0));
         @include transitionDuration(250ms);
         opacity: 1;
     }
 
     &.ng-leave-active {
-        @include transform(translateY(-240px));
+        @include transformValue(translateY(-240px));
         opacity: 0; 
     }
 
     // Hide
     &.ng-hide-add {
-        @include transform(translateY(0));
+        @include transformValue(translateY(0));
         @include transitionDuration(250ms);
         opacity:1;      
     }   
     &.ng-hide-add.ng-hide-add-active {
-        @include transform(translateY(-240px)); 
+        @include transformValue(translateY(-240px)); 
         opacity:0;
     }
 
     // Show
     &.ng-hide-remove {
-        @include transform(translateY(-240px)); 
+        @include transformValue(translateY(-240px)); 
         @include transitionDuration(250ms);
         display:block!important;
         opacity:0;
     }
     &.ng-hide-remove.ng-hide-remove-active {
-        @include transform(translateY(0));
+        @include transformValue(translateY(0));
         opacity:1;
     }
 }
@@ -516,47 +516,47 @@
     @include easingTimingFunction();
 
     &.ng-enter {
-        @include transform(scale(0.7));
+        @include transformValue(scale(0.7));
         @include transitionDuration(250ms);
         opacity: 0;
     }
 
     &.ng-enter-active {
-        @include transform(scale(1));
+        @include transformValue(scale(1));
         opacity: 1; 
     }
 
     &.ng-leave {
-        @include transform(scale(1));
+        @include transformValue(scale(1));
         @include transitionDuration(250ms);
         opacity: 1;
     }
 
     &.ng-leave-active {
-        @include transform(scale(0.7)); 
+        @include transformValue(scale(0.7)); 
         opacity: 0; 
     }
 
     // Hide
     &.ng-hide-add {
-        @include transform(scale(1));
+        @include transformValue(scale(1));
         @include transitionDuration(250ms);
         opacity:1;      
     }   
     &.ng-hide-add.ng-hide-add-active {
-        @include transform(scale(0.7)); 
+        @include transformValue(scale(0.7)); 
         opacity:0;
     }
 
     // Show
     &.ng-hide-remove {
-        @include transform(scale(0.7));
+        @include transformValue(scale(0.7));
         @include transitionDuration(250ms);
         display:block!important;
         opacity:0;
     }
     &.ng-hide-remove.ng-hide-remove-active {
-        @include transform(scale(1));
+        @include transformValue(scale(1));
         opacity:1;
     }
 }
@@ -570,47 +570,47 @@
     @include easingTimingFunction();
 
     &.ng-enter {
-        @include transform(rotate(225deg));
+        @include transformValue(rotate(225deg));
         @include transitionDuration(250ms);
         opacity: 0;
     }
 
     &.ng-enter-active {
-        @include transform(rotate(0deg));
+        @include transformValue(rotate(0deg));
         opacity: 1; 
     }
 
     &.ng-leave {
-        @include transform(rotate(0deg));
+        @include transformValue(rotate(0deg));
         @include transitionDuration(250ms);
         opacity: 1;
     }
 
     &.ng-leave-active {
-        @include transform(rotate(90deg)); 
+        @include transformValue(rotate(90deg)); 
         opacity: 0; 
     }
 
     // Hide
     &.ng-hide-add {
-        @include transform(rotate(0deg));
+        @include transformValue(rotate(0deg));
         @include transitionDuration(250ms);
         opacity:1;      
     }   
     &.ng-hide-add.ng-hide-add-active {
-        @include transform(rotate(90deg)); 
+        @include transformValue(rotate(90deg)); 
         opacity:0;
     }
 
     // Show
     &.ng-hide-remove {
-        @include transform(rotate(225deg));
+        @include transformValue(rotate(225deg));
         @include transitionDuration(250ms);
         display:block!important;
         opacity:0;
     }
     &.ng-hide-remove.ng-hide-remove-active {
-        @include transform(rotate(0deg));
+        @include transformValue(rotate(0deg));
         opacity:1;
     }
 }
@@ -625,47 +625,47 @@
     @include easingOutQuadTimingFunction();
 
     &.ng-enter {
-        @include transform(scale(3));
+        @include transformValue(scale(3));
         @include transitionDuration(250ms);
         opacity: 0;
     }
 
     &.ng-enter-active {
-        @include transform(scale(1));
+        @include transformValue(scale(1));
         opacity: 1; 
     }
 
     &.ng-leave {
-        @include transform(scale(1));
+        @include transformValue(scale(1));
         @include transitionDuration(250ms);
         opacity: 1;
     }
 
     &.ng-leave-active {
-        @include transform(scale(3));
+        @include transformValue(scale(3));
         opacity: 0; 
     }
 
     // Hide
     &.ng-hide-add {
-        @include transform(scale(1));
+        @include transformValue(scale(1));
         @include transitionDuration(250ms);
         opacity:1;      
     }   
     &.ng-hide-add.ng-hide-add-active {
-        @include transform(scale(3));
+        @include transformValue(scale(3));
         opacity:0;
     }
 
     // Show
     &.ng-hide-remove {
-        @include transform(scale(3));
+        @include transformValue(scale(3));
         @include transitionDuration(250ms);
         display:block!important;
         opacity:0;
     }
     &.ng-hide-remove.ng-hide-remove-active {
-        @include transform(scale(1));
+        @include transformValue(scale(1));
         opacity:1;
     }
 }
@@ -680,47 +680,47 @@
     @include bouncyTimingFunction();
 
     &.ng-enter {
-        @include transform(scale(3));
+        @include transformValue(scale(3));
         @include transitionDuration(450ms);
         opacity: 0;
     }
 
     &.ng-enter-active {
-        @include transform(scale(1));
+        @include transformValue(scale(1));
         opacity: 1; 
     }
 
     &.ng-leave {
-        @include transform(scale(1));
+        @include transformValue(scale(1));
         @include transitionDuration(450ms);
         opacity: 1;
     }
 
     &.ng-leave-active {
-        @include transform(scale(3));
+        @include transformValue(scale(3));
         opacity: 0; 
     }
 
     // Hide
     &.ng-hide-add {
-        @include transform(scale(1));
+        @include transformValue(scale(1));
         @include transitionDuration(450ms);
         opacity:1;      
     }   
     &.ng-hide-add.ng-hide-add-active {
-        @include transform(scale(3));
+        @include transformValue(scale(3));
         opacity:0;
     }
 
     // Show
     &.ng-hide-remove {
-        @include transform(scale(3));
+        @include transformValue(scale(3));
         @include transitionDuration(450ms);
         display:block!important;
         opacity:0;
     }
     &.ng-hide-remove.ng-hide-remove-active {
-        @include transform(scale(1));
+        @include transformValue(scale(1));
         opacity:1;
     }
 }
@@ -735,47 +735,47 @@
     @include easingTimingFunction();
 
     &.ng-enter {
-        @include transform(perspective(300px) rotateX(90deg));
+        @include transformValue(perspective(300px) rotateX(90deg));
         @include transitionDuration(550ms);
         opacity: 0.7;
     }
 
     &.ng-enter-active {
-        @include transform(perspective(300px) rotateX(0deg));
+        @include transformValue(perspective(300px) rotateX(0deg));
         opacity: 1; 
     }
 
     &.ng-leave {
-        @include transform(perspective(300px) rotateX(0deg));
+        @include transformValue(perspective(300px) rotateX(0deg));
         @include transitionDuration(550ms);
         opacity: 1;
     }
 
     &.ng-leave-active {
-        @include transform(perspective(300px) rotateX(135deg)); 
+        @include transformValue(perspective(300px) rotateX(135deg)); 
         opacity: 0.7;   
     }
 
     // Hide
     &.ng-hide-add {
-        @include transform(perspective(300px) rotateX(0deg));
+        @include transformValue(perspective(300px) rotateX(0deg));
         @include transitionDuration(550ms);
         opacity:1;      
     }   
     &.ng-hide-add.ng-hide-add-active {
-        @include transform(perspective(300px) rotateX(135deg)); 
+        @include transformValue(perspective(300px) rotateX(135deg)); 
         opacity:0;
     }
 
     // Show
     &.ng-hide-remove {
-        @include transform(perspective(300px) rotateX(90deg));
+        @include transformValue(perspective(300px) rotateX(90deg));
         @include transitionDuration(550ms);
         display:block!important;
         opacity:0;
     }
     &.ng-hide-remove.ng-hide-remove-active {
-        @include transform(perspective(300px) rotateX(0deg));
+        @include transformValue(perspective(300px) rotateX(0deg));
         opacity:1;
     }
 }
@@ -789,47 +789,47 @@
     @include bouncyTimingFunction();
 
     &.ng-enter {
-        @include transform(perspective(300px) rotateY(40deg));
+        @include transformValue(perspective(300px) rotateY(40deg));
         @include transitionDuration(550ms);
         opacity: 0.7;
     }
 
     &.ng-enter-active {
-        @include transform(perspective(300px) rotateY(0deg));
+        @include transformValue(perspective(300px) rotateY(0deg));
         opacity: 1; 
     }
 
     &.ng-leave {
-        @include transform(perspective(300px) rotateY(0deg));
+        @include transformValue(perspective(300px) rotateY(0deg));
         @include transitionDuration(550ms);
         opacity: 1;
     }
 
     &.ng-leave-active {
-        @include transform(perspective(300px) rotateY(-40deg)); 
+        @include transformValue(perspective(300px) rotateY(-40deg)); 
         opacity: 0.7;   
     }
 
     // Hide
     &.ng-hide-add {
-        @include transform(perspective(300px) rotateY(0deg));
+        @include transformValue(perspective(300px) rotateY(0deg));
         @include transitionDuration(550ms);
         opacity:1;      
     }   
     &.ng-hide-add.ng-hide-add-active {
-        @include transform(perspective(300px) rotateY(-40deg)); 
+        @include transformValue(perspective(300px) rotateY(-40deg)); 
         opacity:0;
     }
 
     // Show
     &.ng-hide-remove {
-        @include transform(perspective(300px) rotateY(40deg));
+        @include transformValue(perspective(300px) rotateY(40deg));
         @include transitionDuration(550ms);
         display:block!important;
         opacity:0;
     }
     &.ng-hide-remove.ng-hide-remove-active {
-        @include transform(perspective(300px) rotateY(0deg));
+        @include transformValue(perspective(300px) rotateY(0deg));
         opacity:1;
     }
 }