chore(animation): end animations when fallback applies

ionic/animations/animation.ts

@@ -171,7 +171,7 @@ export class Animation {
     };
 
     if (typeof val === 'string' && val.indexOf(' ') < 0) {
-      let r = val.match(cssValueRegex);
+      let r = val.match(CSS_VALUE_REGEX);
       let num = parseFloat(r[1]);
 
       if (!isNaN(num)) {
@@ -243,7 +243,7 @@ export class Animation {
   play(opts: PlayOptions = {}) {
     var self = this;
     var i: number;
-    var duration = isDefined(opts.duration) ? opts.duration : self._dur;
+    var duration: number = isDefined(opts.duration) ? opts.duration : self._dur;
 
     console.debug('Animation, play, duration', duration, 'easing', self._easing);
 
@@ -252,6 +252,7 @@ export class Animation {
     // and that it has at least one FROM/TO effect
     // and that the FROM/TO effect can tween numeric values
     self.hasTween = false;
+    self.hasCompleted = false;
 
     // fire off all the onPlays
     for (i = 0; i < self._pFns.length; i++) {
@@ -280,6 +281,7 @@ export class Animation {
       // set the FROM properties
       self._progress(0);
 
+      // add the will-change or translateZ properties when applicable
       self._willChg(true);
 
       // set the async TRANSITION END event
@@ -316,7 +318,7 @@ export class Animation {
 
       // since there was no animation, it's done
       // fire off all the onFinishes
-      self._onFinish(true);
+      self._didFinish(true);
     }
   }
 
@@ -349,7 +351,7 @@ export class Animation {
 
       // since there was no animation, it's done
       // fire off all the onFinishes
-      self._onFinish(false);
+      self._didFinish(false);
     }
   }
 
@@ -357,30 +359,52 @@ export class Animation {
     var self = this;
 
     function onTransitionEnd(ev) {
-      console.debug('Animation async end,', (ev ? 'transitionEnd, ' + ev.target.nodeName + ', property: ' + ev.propertyName : 'fallback timeout'));
+      console.debug('Animation onTransitionEnd', ev.target.nodeName, ev.propertyName);
 
       // ensure transition end events and timeouts have been cleared
       self._clearAsync();
 
       // set the after styles
       self._after();
+
+      // remove will change properties
       self._willChg(false);
-      self._onFinish(shouldComplete);
+
+      // transition finished
+      self._didFinish(shouldComplete);
+    }
+
+    function onTransitionFallback() {
+      console.debug('Animation onTransitionFallback');
+      // oh noz! the transition end event didn't fire in time!
+      // instead the fallback timer when first
+
+      // clear the other async end events from firing
+      self._tmr = 0;
+      self._clearAsync();
+
+      // too late to have a smooth animation, just finish it
+      self._setTrans(0, true);
+
+      // ensure the ending progress step gets rendered
+      self._progress(1);
+
+      // set the after styles
+      self._after();
+
+      // remove will change properties
+      self._willChg(false);
+
+      // transition finished
+      self._didFinish(shouldComplete);
     }
 
     // set the TRANSITION END event on one of the transition elements
     self._unregTrans = transitionEnd(self._transEl(), onTransitionEnd);
 
-    // set a fallback timeout if the transition end event never fires
+    // set a fallback timeout if the transition end event never fires, or is too slow
-    self._tmr = setTimeout(function() {
+    // transition end fallback: (animation duration + XXms)
-      // oh noz! the transition end event didn't fire in time!
+    self._tmr = setTimeout(onTransitionFallback, duration + 400);
-      // instead the fallback timer when first
-      // ensure the ending progress step gets rendered
-      self._progress(1);
-
-      // manually run transition end event
-      onTransitionEnd(null);
-    }, duration + 350);
   }
 
   _clearAsync() {
@@ -661,7 +685,7 @@ export class Animation {
       // for example, the left menu was dragged all the way open already
       this._after();
       this._willChg(false);
-      this._onFinish(shouldComplete);
+      this._didFinish(shouldComplete);
 
     } else {
       // the stepValue was left off at a point when it needs to finish transition still
@@ -692,7 +716,7 @@ export class Animation {
     return this;
   }
 
-  _onFinish(hasCompleted: boolean) {
+  _didFinish(hasCompleted: boolean) {
     this.isPlaying = false;
     this.hasCompleted = hasCompleted;
     var i: number;
@@ -798,6 +822,6 @@ const TRANSFORMS = {
   'skewX':1, 'skewY':1, 'perspective':1
 };
 
-const cssValueRegex = /(^-?\d*\.?\d*)(.*)/;
+const CSS_VALUE_REGEX = /(^-?\d*\.?\d*)(.*)/;
 
 let AnimationRegistry = {};