update legacy browser animation

README.md

@@ -1,5 +1,5 @@
 # tiny-slider
-![version](https://img.shields.io/badge/Version-0.6.6-green.svg)   
+![version](https://img.shields.io/badge/Version-0.7.0-green.svg)   
 Tiny slider for all purposes, inspired by [Owl Carousel](http://owlcarousel.owlgraphic.com/).
 Works on morden browsers and IE8+.   
 [demo](http://creatiointl.org/william/tiny-slider/v1/demo/)   

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "tiny-slider",
-  "version": "0.6.6",
+  "version": "0.7.0",
   "homepage": "https://github.com/ganlanyuan/tiny-slider",
   "authors": [
     "WilliamLin <[email protected]>"

changelog.md

@@ -1,5 +1,8 @@
 # Changelog
 
+#### v0.7.0
+- Added: slide animation for legacy browsers.
+
 #### v0.6.6
 - Fixed: an edge padding issue.
 

dist/tiny-slider.js

@@ -570,7 +570,7 @@ gn.unwrap = function (els) {
 };
 /**
   * tiny-slider
-  * @version 0.6.6
+  * @version 0.7.0
   * @author William Lin
   * @license The MIT License (MIT)
   * @github https://github.com/ganlanyuan/tiny-slider/
@@ -665,7 +665,7 @@ var tinySlider = (function () {
         nav = options.nav,
         navContainer = (!options.navContainer) ? false : options.navContainer,
         arrowKeys = options.arrowKeys,
-        speed = (!TRANSITIONDURATION) ? 0 : options.speed,
+        speed = options.speed,
         autoplay = options.autoplay,
         autoplayTimeout = options.autoplayTimeout,
         autoplayDirection = (options.autoplayDirection === 'forward') ? 1 : -1,
@@ -1253,7 +1253,8 @@ var tinySlider = (function () {
       } else {
         return function (distance) {
           var x = distance || -slideWidth * index;
-          slideContainer.style.left = x + 'px';
+          transformAttr = (direction === 'horizontal')? 'left' : 'top';
+          jsTransform(slideContainer, transformAttr, x, speed, onTransitionEnd);
         };
       }
     })();
@@ -1766,5 +1767,24 @@ var tinySlider = (function () {
     return false; // explicit for ie9-
   }
 
+  function jsTransform(element, attr, to, duration, callback) {
+    var tick = Math.min(duration, 10),
+        from = Number(element.style[attr].slice(0, -2)),
+        positionTick = (to - from) / duration * tick,
+        running;
+
+    setTimeout(moveElement, tick);
+    function moveElement() {
+      duration -= tick;
+      from += positionTick;
+      element.style[attr] = from + 'px';
+      if (duration > 0) { 
+        setTimeout(moveElement, tick); 
+      } else {
+        callback();
+      }
+    }
+  }
+
   return core;
 })();

dist/tiny-slider.native.js

@@ -1,6 +1,6 @@
 /**
   * tiny-slider
-  * @version 0.6.6
+  * @version 0.7.0
   * @author William Lin
   * @license The MIT License (MIT)
   * @github https://github.com/ganlanyuan/tiny-slider/
@@ -95,7 +95,7 @@ var tinySlider = (function () {
         nav = options.nav,
         navContainer = (!options.navContainer) ? false : options.navContainer,
         arrowKeys = options.arrowKeys,
-        speed = (!TRANSITIONDURATION) ? 0 : options.speed,
+        speed = options.speed,
         autoplay = options.autoplay,
         autoplayTimeout = options.autoplayTimeout,
         autoplayDirection = (options.autoplayDirection === 'forward') ? 1 : -1,
@@ -683,7 +683,8 @@ var tinySlider = (function () {
       } else {
         return function (distance) {
           var x = distance || -slideWidth * index;
-          slideContainer.style.left = x + 'px';
+          transformAttr = (direction === 'horizontal')? 'left' : 'top';
+          jsTransform(slideContainer, transformAttr, x, speed, onTransitionEnd);
         };
       }
     })();
@@ -1196,5 +1197,24 @@ var tinySlider = (function () {
     return false; // explicit for ie9-
   }
 
+  function jsTransform(element, attr, to, duration, callback) {
+    var tick = Math.min(duration, 10),
+        from = Number(element.style[attr].slice(0, -2)),
+        positionTick = (to - from) / duration * tick,
+        running;
+
+    setTimeout(moveElement, tick);
+    function moveElement() {
+      duration -= tick;
+      from += positionTick;
+      element.style[attr] = from + 'px';
+      if (duration > 0) { 
+        setTimeout(moveElement, tick); 
+      } else {
+        callback();
+      }
+    }
+  }
+
   return core;
 })();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiny-slider",
-  "version": "0.6.6",
+  "version": "0.7.0",
   "description": "Pure tiny javascript slider for all purposes.",
   "main": "dist/tiny-slider.js",
   "style": "dist/tiny-slider.css",

src/tiny-slider.native.js

@@ -1,6 +1,6 @@
 /**
   * tiny-slider
-  * @version 0.6.6
+  * @version 0.7.0
   * @author William Lin
   * @license The MIT License (MIT)
   * @github https://github.com/ganlanyuan/tiny-slider/
@@ -95,7 +95,7 @@ var tinySlider = (function () {
         nav = options.nav,
         navContainer = (!options.navContainer) ? false : options.navContainer,
         arrowKeys = options.arrowKeys,
-        speed = (!TRANSITIONDURATION) ? 0 : options.speed,
+        speed = options.speed,
         autoplay = options.autoplay,
         autoplayTimeout = options.autoplayTimeout,
         autoplayDirection = (options.autoplayDirection === 'forward') ? 1 : -1,
@@ -683,31 +683,8 @@ var tinySlider = (function () {
       } else {
         return function (distance) {
           var x = distance || -slideWidth * index;
-          var animationInterval = 20;
-          var transitionSpeed = speed || options.speed;
-          var currPos = parseInt(slideContainer.style.left && slideContainer.style.left.replace('px', '') || 0);
-          var posDiff = x - currPos;
-          var posInc = posDiff / transitionSpeed * animationInterval;
-          var updatePos = currPos;
-          var inter = null;
-          var nextDir = posDiff < 0;
-
-          inter = setInterval(function animSlide() {
-            updatePos = parseFloat(updatePos + posInc);
-            slideContainer.style.left = parseInt(updatePos) + 'px';
-            if ((nextDir && updatePos <= x) || (!nextDir && updatePos >= x)) {
-              clearInterval(inter);
-            }
-          }, animationInterval);
-
-          setTimeout(function stopSlideAnim() {
-            if (inter) {// safe exit
-              clearInterval(inter);
-            }
-            if (updatePos !== x) {// jump to last step if not reached yet (setInterval not 100%  accurate)
-              slideContainer.style.left = x + 'px';
-            }
-          }, transitionSpeed);
+          transformAttr = (direction === 'horizontal')? 'left' : 'top';
+          jsTransform(slideContainer, transformAttr, x, speed, onTransitionEnd);
         };
       }
     })();
@@ -1220,5 +1197,24 @@ var tinySlider = (function () {
     return false; // explicit for ie9-
   }
 
+  function jsTransform(element, attr, to, duration, callback) {
+    var tick = Math.min(duration, 10),
+        from = Number(element.style[attr].slice(0, -2)),
+        positionTick = (to - from) / duration * tick,
+        running;
+
+    setTimeout(moveElement, tick);
+    function moveElement() {
+      duration -= tick;
+      from += positionTick;
+      element.style[attr] = from + 'px';
+      if (duration > 0) { 
+        setTimeout(moveElement, tick); 
+      } else {
+        callback();
+      }
+    }
+  }
+
   return core;
 })();

tests/E2E/tests.js

@@ -410,7 +410,7 @@ tinySlider({
 tinySlider({
   container: tt.dom.sliders.autoplay,
   items: 3,
-  // autoplay: true,
+  autoplay: true,
   speed: 300,
   autoplayTimeout: 3000,
   autoplayText: ['▶', '❚❚'],