Merge pull request #2 from nicolasdelfino/compat2

compat 2
nicolasdelfino · Feb 21, 2019 · 7b6573e · 7b6573e
2 parents 2be0e15 + 67f0a6b
commit 7b6573e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tracks-js",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "main": "dist/tracks.iife.js",
   "module": "dist/tracks.esm.js",
   "browser": "dist/tracks.iife.js",

diff --git a/src/tracks.js b/src/tracks.js
@@ -185,13 +185,11 @@ window.Tracks = window.tracks = (function() {
   */
   function applyAnimation(element, transitionTime, ease) {
     transitionAgents.forEach(function(agent) {
-      element.style[agent] =
-        typeDefs.DEFAULT_TWEEN_PROP +
-        ' ' +
-        transitionTime +
-        typeDefs.DEFAULT_TIME_UNIT +
-        ' ' +
-        ease;
+      element.style.cssText += agent + ": " 
+      + typeDefs.DEFAULT_TWEEN_PROP + " " 
+      + transitionTime 
+      + typeDefs.DEFAULT_TIME_UNIT + " " 
+      + ease;
     });
   }
 
@@ -202,10 +200,12 @@ window.Tracks = window.tracks = (function() {
     element.style[prop.key] = prop.value;
     if (prop.handler) {
       transformAgents.forEach(function(agent) {
-        element.style[agent] = prop.handler(prop.value);
+        // element.style[agent] = prop.handler(prop.value);
+        element.style.cssText += agent + ": " + prop.handler(prop.value) + ";";
       });
     } else {
-      element.style[prop.key] = prop.value;
+      // element.style[prop.key] = prop.value;
+      element.style.cssText += prop.key + ":" + prop.value + ";"
     }
   }
 
@@ -224,9 +224,11 @@ window.Tracks = window.tracks = (function() {
   Reset styles
   */
   function resetStyles(element) {
-    element.style.transition = '';
+    // element.style.transition = '';
+    element.style.cssText += 'transition: "";'
     transformAgents.forEach(function(agent) {
-      element.style[agent] = '';
+      // element.style[agent] = '';
+      element.style.cssText += agent + ": " + "";
     });
   }
 
@@ -425,10 +427,12 @@ window.Tracks = window.tracks = (function() {
       Give the element a default width and height if the properties haven't been specified
       */
       if (element.style.cssText.indexOf('width') === -1) {
-        element.style.width = '0px';
+        // element.style.width = '0px';
+        element.style.cssText += "width: 0px";
       }
       if (element.style.cssText.indexOf('height') === -1) {
-        element.style.height = '0px';
+        // element.style.height = '0px';
+        element.style.cssText += "height: 0px";
       }
 
       /*
@@ -530,7 +534,9 @@ window.Tracks = window.tracks = (function() {
         applyStyles(element, prop);
       });
 
-      window.requestAnimationFrame(function() {
+      var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;
+
+      raf(function() {
         setTimeout(function() {
           applyAnimation(element, transitionTime, easingEquationTo);
           animation.to.forEach(function(prop) {
@@ -542,7 +548,7 @@ window.Tracks = window.tracks = (function() {
             resolve();
           }, transitionTime);
         }, delayTime);
-      });
+      }.bind(window));
 
       /* Add element to list (for reversing animations) */
       var toList = { el: element, fromProps: fromProps, toProps: toProps, duration: duration };