Animation for mobile

#46

src/js/modules/webslides.js

@@ -99,6 +99,11 @@ export default class WebSlides {
       scrollWait,
       slideOffset
     };
+    /**
+     * Initialisation flag.
+     * @type {boolean}
+     */
+    this.initialised = false;
 
     if (!this.el) {
       throw new Error('Couldn\'t find the webslides container!');
@@ -150,6 +155,7 @@ export default class WebSlides {
    * @fires WebSlide#ws:init
    */
   onInit_() {
+    this.initialised = true;
     DOM.fireEvent(this.el, 'ws:init');
   }
 
@@ -231,7 +237,8 @@ export default class WebSlides {
   }
 
   /**
-   * Transitions to a slide, without doing the scroll animation.
+   * Transitions to a slide, without doing the scroll animation. If the page is
+   * already initialised and on mobile device, it will do a slide animation.
    * @param {boolean} isMovingForward Whether we're going forward or backwards.
    * @param {Slide} nextSlide Next slide.
    * @param {Function} callback Callback to be called upon finishing. This is a
@@ -240,9 +247,11 @@ export default class WebSlides {
    */
   transitionToSlide_(isMovingForward, nextSlide, callback) {
     scrollTo(0, 0);
+    let className = 'slideInRight';
 
     if (!isMovingForward) {
       nextSlide.moveBeforeFirst();
+      className = 'slideInLeft';
     }
 
     if (this.currentSlide_) {
@@ -254,7 +263,19 @@ export default class WebSlides {
     }
 
     nextSlide.show();
+
+    if (this.initialised &&
+        this.plugins.touch &&
+        this.plugins.touch.isEnabled) {
+      DOM.once(nextSlide.el, DOM.getAnimationEvent(), () => {
+        nextSlide.el.classList.remove(className);
         callback.call(this, nextSlide);
+      });
+
+      nextSlide.el.classList.add(className);
+    } else {
+      callback.call(this, nextSlide);
+    }
   }
 
   /**

src/js/utils/dom.js

@@ -1,5 +1,7 @@
 import WSCustomEvent from './custom-event';
 
+let transitionEvent = '';
+let animationEvent = '';
 
 /**
  * Static class for DOM helper.
@@ -25,6 +27,81 @@ export default class DOM {
     return node;
   }
 
+  /**
+   * Listens for an event once.
+   * @param {Element} el Element to listen to.
+   * @param {string} event Event Type.
+   * @param {Function} callback Function to execute once the event fires.
+   */
+  static once(el, event, callback) {
+    const cb = e => {
+      if (e.target === el) {
+        el.removeEventListener(event, cb);
+        callback(e);
+      }
+    };
+
+    el.addEventListener(event, cb, false);
+  }
+
+  /**
+   * Gets the prefixed transitionend event.
+   * @return {string}
+   */
+  static getTransitionEvent() {
+    if (transitionEvent) {
+      return transitionEvent;
+    }
+
+    const el = document.createElement('ws');
+    const transitions = {
+      'transition': 'transitionend',
+      'OTransition': 'oTransitionEnd',
+      'MozTransition': 'transitionend',
+      'WebkitTransition': 'webkitTransitionEnd'
+    };
+    const transitionNames = Object.keys(transitions);
+
+    for (let i = 0, length = transitionNames.length; i < length && !transitionEvent; i++) {
+      const transitionName = transitionNames[i];
+
+      if (typeof el.style[transitionName] !== 'undefined') {
+        transitionEvent = transitions[transitionName];
+      }
+    }
+
+    return transitionEvent;
+  }
+
+  /**
+   * Gets the prefixed animation end event.
+   * @return {string}
+   */
+  static getAnimationEvent() {
+    if (animationEvent) {
+      return animationEvent;
+    }
+
+    const el = document.createElement('ws');
+    const animations = {
+      'animation': 'animationend',
+      'OAnimation': 'oAnimationEnd',
+      'MozAnimation': 'animationend',
+      'WebkitAnimation': 'webkitAnimationEnd'
+    };
+    const animationNames = Object.keys(animations);
+
+    for (let i = 0, length = animationNames.length; i < length && !animationEvent; i++) {
+      const animationName = animationNames[i];
+
+      if (typeof el.style[animationName] !== 'undefined') {
+        animationEvent = animations[animationName];
+      }
+    }
+
+    return animationEvent;
+  }
+
   /**
    * Hides an element setting the display to none.
    * @param {Element} el Element to be hidden.

static/css/base.css

@@ -614,6 +614,7 @@ https://github.com/daneden/animate.css*/
 .slideInLeft {
   -webkit-animation: slideInLeft 1s;
   animation: slideInLeft 1s;
+  animation-fill-mode: both;
 }
 
 /*-- slideInRight -- */
@@ -632,6 +633,7 @@ https://github.com/daneden/animate.css*/
 .slideInRight {
   -webkit-animation: slideInRight 1s;
   animation: slideInRight 1s;
+  animation-fill-mode: both;
 }
 
 /* Animated Background (Matrix) */