fixed a bug with animate

LinkedInAttic · Aug 29, 2012 · 0c7a7a2 · 0c7a7a2
1 parent 2cdb71c
commit 0c7a7a2
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 44 deletions.
diff --git a/css/hopscotch.css b/css/hopscotch.css
diff --git a/css/hopscotch.less b/css/hopscotch.less
@@ -2,6 +2,7 @@
 @import "fade.less";
 
 @anim-duration: .5s;
+@anim-timing: ease-in-out;
 @bubbleCornerRadius: 10px;
 @bubbleColor: #fff;
 @bubbleBorderWidth: 6px;
@@ -23,7 +24,25 @@ div#hopscotch-bubble {
   .background-clip;
 
   &.animate {
-    .transition('top, left', @anim-duration, ease-in-out);
+    -moz-transition-property: top, left;
+    -moz-transition-duration: @anim-duration;
+    -moz-transition-timing-function: @anim-timing;
+
+    -ms-transition-property: top, left;
+    -ms-transition-duration: @anim-duration;
+    -ms-transition-timing-function: @anim-timing;
+
+    -o-transition-property: top, left;
+    -o-transition-duration: @anim-duration;
+    -o-transition-timing-function: @anim-timing;
+
+    -webkit-transition-property: top, left;
+    -webkit-transition-duration: @anim-duration;
+    -webkit-transition-timing-function: @anim-timing;
+
+    transition-property: top, left;
+    transition-duration: @anim-duration;
+    transition-timing-function: @anim-timing;
   }
 
   &.invisible {

diff --git a/css/util.less b/css/util.less
@@ -5,27 +5,6 @@
   -webkit-border-radius: @radius;
   border-radius: @radius;
 }
-.transition (@property, @duration, @timing) {
-  -moz-transition-property: @property;
-  -moz-transition-duration: @duration;
-  -moz-transition-timing-function: @timing;
-
-  -ms-transition-property: @property;
-  -ms-transition-duration: @duration;
-  -ms-transition-timing-function: @timing;
-
-  -o-transition-property: @property;
-  -o-transition-duration: @duration;
-  -o-transition-timing-function: @timing;
-
-  -webkit-transition-property: @property;
-  -webkit-transition-duration: @duration;
-  -webkit-transition-timing-function: @timing;
-
-  transition-property: @property;
-  transition-duration: @duration;
-  transition-timing-function: @timing;
-}
 .background-clip () {
   -moz-background-clip: padding; /* for Mozilla browsers*/
   -webkit-background-clip: padding;   /* Webkit */