add helper function for transform

UBC-CPEN · Dec 1, 2015 · 456793e · 456793e
1 parent bd33558
commit 456793e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 4 deletions.
diff --git a/js/animate.js b/js/animate.js
@@ -22,6 +22,26 @@ animateCss.useJs = !Modernizr.cssanimations;
 
 }(jQuery));
 
+//helpers
+animateCss.transform = function (e, o) {
+    if (Modernizr.csstransforms) {
+        var str = "";
+        if (typeof (o.length) !== "undefined") {
+            for (i = 0; i < o.length; i++) {
+                str += (o[i].property + "(" + o[i].value + ") ");
+            }
+        } else {
+            str += (o.property + "(" + o.value + ") ");
+        }
+        $(e).css('-webkit-transform', str);
+        $(e).css('-ms-transform', str);
+        $(e).css('transform', str);
+    } else {
+        //no transforms.. what to do..?
+        console.log("CRY");
+    }
+}
+
 /*
  * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
  *

diff --git a/js/bouncing_entrances.js b/js/bouncing_entrances.js
@@ -2,7 +2,10 @@ animateCss.bounceIn = function (e) {
     $(e).animate({ asdf: 0 },0)
         .animate({asdf: 1}, {
         step: function (now, fx) {
-            $(this).css('-webkit-transform', "scale(" + now + ")");
+            animateCss.transform(this, {
+                property: "scale",
+                value: now
+            });
         },
         duration: 1000,
         easing: "easeOutElastic"

diff --git a/js/bouncing_exits.js b/js/bouncing_exits.js
@@ -2,19 +2,28 @@ animateCss.bounceOut = function (e) {
     $(e).animate({ asdf: 1 }, 0)
         .animate({ asdf: 0.9 }, {
             step: function (now, fx) {
-                $(this).css('-webkit-transform', "scale(" + now + ")");
+                animateCss.transform(this, {
+                    property: "scale",
+                    value:now
+                });
             },
             duration: 70,
             easing: "swing",
         })
         .animate({ asdf: 0 }, {
             step: function (now, fx) {
-                $(this).css('-webkit-transform', "scale(" + now + ")");
+                animateCss.transform(this, {
+                    property: "scale",
+                    value: now
+                });
             },
             duration: 650,
             easing: "easeInBack",
             complete: function () {
-                $(e).css('-webkit-transform', "scale(1)");
+                animateCss.transform(this, {
+                    property: "scale",
+                    value: 1
+                });
             }
         })
 }