@angular-wave/angular.ts 0.0.1

package/src/animations/animateCss.js

@@ -0,0 +1,1139 @@
+import { jqLite } from "../jqLite";
+import { forEach, isDefined, isArray } from "../core/utils";
+import {
+  TRANSITION_DURATION_PROP,
+  TRANSITION_DELAY_PROP,
+  ANIMATION_DELAY_PROP,
+  TRANSITION_PROP,
+  PROPERTY_KEY,
+  ANIMATION_DURATION_PROP,
+  ANIMATION_ITERATION_COUNT_KEY,
+  ANIMATION_PROP,
+  DURATION_KEY,
+  applyAnimationClassesFactory,
+  pendClasses,
+  prepareAnimationOptions,
+  getDomNode,
+  packageStyles,
+  EVENT_CLASS_PREFIX,
+  ADD_CLASS_SUFFIX,
+  REMOVE_CLASS_SUFFIX,
+  applyInlineStyle,
+  SAFE_FAST_FORWARD_DURATION_VALUE,
+  ACTIVE_CLASS_SUFFIX,
+  applyAnimationFromStyles,
+  applyAnimationStyles,
+  blockKeyframeAnimations,
+  removeFromArray,
+  TIMING_KEY,
+  TRANSITIONEND_EVENT,
+  ANIMATIONEND_EVENT,
+  applyAnimationToStyles,
+} from "./shared";
+
+const ANIMATE_TIMER_KEY = "$$animateCss";
+
+/**
+ * @ngdoc service
+ * @name $animateCss
+ * @kind object
+ *
+ * @description
+ * The `$animateCss` service is a useful utility to trigger customized CSS-based transitions/keyframes
+ * from a JavaScript-based animation or directly from a directive. The purpose of `$animateCss` is NOT
+ * to side-step how `$animate` and ngAnimate work, but the goal is to allow pre-existing animations or
+ * directives to create more complex animations that can be purely driven using CSS code.
+ *
+ * Note that only browsers that support CSS transitions and/or keyframe animations are capable of
+ * rendering animations triggered via `$animateCss` (bad news for IE9 and lower).
+ *
+ * ## General Use
+ * Once again, `$animateCss` is designed to be used inside of a registered JavaScript animation that
+ * is powered by ngAnimate. It is possible to use `$animateCss` directly inside of a directive, however,
+ * any automatic control over cancelling animations and/or preventing animations from being run on
+ * child elements will not be handled by AngularJS. For this to work as expected, please use `$animate` to
+ * trigger the animation and then setup a JavaScript animation that injects `$animateCss` to trigger
+ * the CSS animation.
+ *
+ * The example below shows how we can create a folding animation on an element using `ng-if`:
+ *
+ * ```html
+ * <!-- notice the `fold-animation` CSS class -->
+ * <div ng-if="onOff" class="fold-animation">
+ *   This element will go BOOM
+ * </div>
+ * <button ng-click="onOff=true">Fold In</button>
+ * ```
+ *
+ * Now we create the **JavaScript animation** that will trigger the CSS transition:
+ *
+ * ```js
+ * ngModule.animation('.fold-animation', ['$animateCss', function($animateCss) {
+ *   return {
+ *     enter: function(element, doneFn) {
+ *       let height = element[0].offsetHeight;
+ *       return $animateCss(element, {
+ *         from: { height:'0px' },
+ *         to: { height:height + 'px' },
+ *         duration: 1 // one second
+ *       });
+ *     }
+ *   }
+ * }]);
+ * ```
+ *
+ * ## More Advanced Uses
+ *
+ * `$animateCss` is the underlying code that ngAnimate uses to power **CSS-based animations** behind the scenes. Therefore CSS hooks
+ * like `.ng-EVENT`, `.ng-EVENT-active`, `.ng-EVENT-stagger` are all features that can be triggered using `$animateCss` via JavaScript code.
+ *
+ * This also means that just about any combination of adding classes, removing classes, setting styles, dynamically setting a keyframe animation,
+ * applying a hardcoded duration or delay value, changing the animation easing or applying a stagger animation are all options that work with
+ * `$animateCss`. The service itself is smart enough to figure out the combination of options and examine the element styling properties in order
+ * to provide a working animation that will run in CSS.
+ *
+ * The example below showcases a more advanced version of the `.fold-animation` from the example above:
+ *
+ * ```js
+ * ngModule.animation('.fold-animation', ['$animateCss', function($animateCss) {
+ *   return {
+ *     enter: function(element, doneFn) {
+ *       let height = element[0].offsetHeight;
+ *       return $animateCss(element, {
+ *         addClass: 'red large-text pulse-twice',
+ *         easing: 'ease-out',
+ *         from: { height:'0px' },
+ *         to: { height:height + 'px' },
+ *         duration: 1 // one second
+ *       });
+ *     }
+ *   }
+ * }]);
+ * ```
+ *
+ * Since we're adding/removing CSS classes then the CSS transition will also pick those up:
+ *
+ * ```css
+ * /&#42; since a hardcoded duration value of 1 was provided in the JavaScript animation code,
+ * the CSS classes below will be transitioned despite them being defined as regular CSS classes &#42;/
+ * .red { background:red; }
+ * .large-text { font-size:20px; }
+ *
+ * /&#42; we can also use a keyframe animation and $animateCss will make it work alongside the transition &#42;/
+ * .pulse-twice {
+ *   animation: 0.5s pulse linear 2;
+ *   -webkit-animation: 0.5s pulse linear 2;
+ * }
+ *
+ * @keyframes pulse {
+ *   from { transform: scale(0.5); }
+ *   to { transform: scale(1.5); }
+ * }
+ *
+ * @-webkit-keyframes pulse {
+ *   from { -webkit-transform: scale(0.5); }
+ *   to { -webkit-transform: scale(1.5); }
+ * }
+ * ```
+ *
+ * Given this complex combination of CSS classes, styles and options, `$animateCss` will figure everything out and make the animation happen.
+ *
+ * ## How the Options are handled
+ *
+ * `$animateCss` is very versatile and intelligent when it comes to figuring out what configurations to apply to the element to ensure the animation
+ * works with the options provided. Say for example we were adding a class that contained a keyframe value and we wanted to also animate some inline
+ * styles using the `from` and `to` properties.
+ *
+ * ```js
+ * let animator = $animateCss(element, {
+ *   from: { background:'red' },
+ *   to: { background:'blue' }
+ * });
+ * animator.start();
+ * ```
+ *
+ * ```css
+ * .rotating-animation {
+ *   animation:0.5s rotate linear;
+ *   -webkit-animation:0.5s rotate linear;
+ * }
+ *
+ * @keyframes rotate {
+ *   from { transform: rotate(0deg); }
+ *   to { transform: rotate(360deg); }
+ * }
+ *
+ * @-webkit-keyframes rotate {
+ *   from { -webkit-transform: rotate(0deg); }
+ *   to { -webkit-transform: rotate(360deg); }
+ * }
+ * ```
+ *
+ * The missing pieces here are that we do not have a transition set (within the CSS code nor within the `$animateCss` options) and the duration of the animation is
+ * going to be detected from what the keyframe styles on the CSS class are. In this event, `$animateCss` will automatically create an inline transition
+ * style matching the duration detected from the keyframe style (which is present in the CSS class that is being added) and then prepare both the transition
+ * and keyframe animations to run in parallel on the element. Then when the animation is underway the provided `from` and `to` CSS styles will be applied
+ * and spread across the transition and keyframe animation.
+ *
+ * ## What is returned
+ *
+ * `$animateCss` works in two stages: a preparation phase and an animation phase. Therefore when `$animateCss` is first called it will NOT actually
+ * start the animation. All that is going on here is that the element is being prepared for the animation (which means that the generated CSS classes are
+ * added and removed on the element). Once `$animateCss` is called it will return an object with the following properties:
+ *
+ * ```js
+ * let animator = $animateCss(element, { ... });
+ * ```
+ *
+ * Now what do the contents of our `animator` variable look like:
+ *
+ * ```js
+ * {
+ *   // starts the animation
+ *   start: Function,
+ *
+ *   // ends (aborts) the animation
+ *   end: Function
+ * }
+ * ```
+ *
+ * To actually start the animation we need to run `animation.start()` which will then return a promise that we can hook into to detect when the animation ends.
+ * If we choose not to run the animation then we MUST run `animation.end()` to perform a cleanup on the element (since some CSS classes and styles may have been
+ * applied to the element during the preparation phase). Note that all other properties such as duration, delay, transitions and keyframes are just properties
+ * and that changing them will not reconfigure the parameters of the animation.
+ *
+ * ### runner.done() vs runner.then()
+ * It is documented that `animation.start()` will return a promise object and this is true, however, there is also an additional method available on the
+ * runner called `.done(callbackFn)`. The done method works the same as `.finally(callbackFn)`, however, it does **not trigger a digest to occur**.
+ * Therefore, for performance reasons, it's always best to use `runner.done(callback)` instead of `runner.then()`, `runner.catch()` or `runner.finally()`
+ * unless you really need a digest to kick off afterwards.
+ *
+ * Keep in mind that, to make this easier, ngAnimate has tweaked the JS animations API to recognize when a runner instance is returned from $animateCss
+ * (so there is no need to call `runner.done(doneFn)` inside of your JavaScript animation code).
+ * Check the {@link ngAnimate.$animateCss#usage animation code above} to see how this works.
+ *
+ * @param {Element} element the element that will be animated
+ * @param {object} options the animation-related options that will be applied during the animation
+ *
+ * * `event` - The DOM event (e.g. enter, leave, move). When used, a generated CSS class of `ng-EVENT` and `ng-EVENT-active` will be applied
+ * to the element during the animation. Multiple events can be provided when spaces are used as a separator. (Note that this will not perform any DOM operation.)
+ * * `structural` - Indicates that the `ng-` prefix will be added to the event class. Setting to `false` or omitting will turn `ng-EVENT` and
+ * `ng-EVENT-active` in `EVENT` and `EVENT-active`. Unused if `event` is omitted.
+ * * `easing` - The CSS easing value that will be applied to the transition or keyframe animation (or both).
+ * * `transitionStyle` - The raw CSS transition style that will be used (e.g. `1s linear all`).
+ * * `keyframeStyle` - The raw CSS keyframe animation style that will be used (e.g. `1s my_animation linear`).
+ * * `from` - The starting CSS styles (a key/value object) that will be applied at the start of the animation.
+ * * `to` - The ending CSS styles (a key/value object) that will be applied across the animation via a CSS transition.
+ * * `addClass` - A space separated list of CSS classes that will be added to the element and spread across the animation.
+ * * `removeClass` - A space separated list of CSS classes that will be removed from the element and spread across the animation.
+ * * `duration` - A number value representing the total duration of the transition and/or keyframe (note that a value of 1 is 1000ms). If a value of `0`
+ * is provided then the animation will be skipped entirely.
+ * * `delay` - A number value representing the total delay of the transition and/or keyframe (note that a value of 1 is 1000ms). If a value of `true` is
+ * used then whatever delay value is detected from the CSS classes will be mirrored on the elements styles (e.g. by setting delay true then the style value
+ * of the element will be `transition-delay: DETECTED_VALUE`). Using `true` is useful when you want the CSS classes and inline styles to all share the same
+ * CSS delay value.
+ * * `stagger` - A numeric time value representing the delay between successively animated elements
+ * ({@link ngAnimate#css-staggering-animations Click here to learn how CSS-based staggering works in ngAnimate.})
+ * * `staggerIndex` - The numeric index representing the stagger item (e.g. a value of 5 is equal to the sixth item in the stagger; therefore when a
+ *   `stagger` option value of `0.1` is used then there will be a stagger delay of `600ms`)
+ * * `applyClassesEarly` - Whether or not the classes being added or removed will be used when detecting the animation. This is set by `$animate` when enter/leave/move animations are fired to ensure that the CSS classes are resolved in time. (Note that this will prevent any transitions from occurring on the classes being added and removed.)
+ * * `cleanupStyles` - Whether or not the provided `from` and `to` styles will be removed once
+ *    the animation is closed. This is useful for when the styles are used purely for the sake of
+ *    the animation and do not have a lasting visual effect on the element (e.g. a collapse and open animation).
+ *    By default this value is set to `false`.
+ *
+ * @return {object} an object with start and end methods and details about the animation.
+ *
+ * * `start` - The method to start the animation. This will return a `Promise` when called.
+ * * `end` - This method will cancel the animation and remove all applied CSS classes and styles.
+ */
+const ONE_SECOND = 1000;
+
+const ELAPSED_TIME_MAX_DECIMAL_PLACES = 3;
+const CLOSING_TIME_BUFFER = 1.5;
+
+const DETECT_CSS_PROPERTIES = {
+  transitionDuration: TRANSITION_DURATION_PROP,
+  transitionDelay: TRANSITION_DELAY_PROP,
+  transitionProperty: TRANSITION_PROP + PROPERTY_KEY,
+  animationDuration: ANIMATION_DURATION_PROP,
+  animationDelay: ANIMATION_DELAY_PROP,
+  animationIterationCount: ANIMATION_PROP + ANIMATION_ITERATION_COUNT_KEY,
+};
+
+const DETECT_STAGGER_CSS_PROPERTIES = {
+  transitionDuration: TRANSITION_DURATION_PROP,
+  transitionDelay: TRANSITION_DELAY_PROP,
+  animationDuration: ANIMATION_DURATION_PROP,
+  animationDelay: ANIMATION_DELAY_PROP,
+};
+
+function getCssKeyframeDurationStyle(duration) {
+  return [ANIMATION_DURATION_PROP, `${duration}s`];
+}
+
+function getCssDelayStyle(delay, isKeyframeAnimation) {
+  const prop = isKeyframeAnimation
+    ? ANIMATION_DELAY_PROP
+    : TRANSITION_DELAY_PROP;
+  return [prop, `${delay}s`];
+}
+
+function computeCssStyles(element, properties) {
+  const styles = Object.create(null);
+  const detectedStyles = window.getComputedStyle(element) || {};
+  forEach(properties, (formalStyleName, actualStyleName) => {
+    let val = detectedStyles[formalStyleName];
+    if (val) {
+      const c = val.charAt(0);
+
+      // only numerical-based values have a negative sign or digit as the first value
+      if (c === "-" || c === "+" || c >= 0) {
+        val = parseMaxTime(val);
+      }
+
+      // by setting this to null in the event that the delay is not set or is set directly as 0
+      // then we can still allow for negative values to be used later on and not mistake this
+      // value for being greater than any other negative value.
+      if (val === 0) {
+        val = null;
+      }
+      styles[actualStyleName] = val;
+    }
+  });
+
+  return styles;
+}
+
+function parseMaxTime(str) {
+  let maxValue = 0;
+  const values = str.split(/\s*,\s*/);
+  forEach(values, (value) => {
+    // it's always safe to consider only second values and omit `ms` values since
+    // getComputedStyle will always handle the conversion for us
+    if (value.charAt(value.length - 1) === "s") {
+      value = value.substring(0, value.length - 1);
+    }
+    value = parseFloat(value) || 0;
+    maxValue = maxValue ? Math.max(value, maxValue) : value;
+  });
+  return maxValue;
+}
+
+function truthyTimingValue(val) {
+  return val === 0 || val != null;
+}
+
+function getCssTransitionDurationStyle(duration, applyOnlyDuration) {
+  let style = TRANSITION_PROP;
+  let value = `${duration}s`;
+  if (applyOnlyDuration) {
+    style += DURATION_KEY;
+  } else {
+    value += " linear all";
+  }
+  return [style, value];
+}
+
+// we do not reassign an already present style value since
+// if we detect the style property value again we may be
+// detecting styles that were added via the `from` styles.
+// We make use of `isDefined` here since an empty string
+// or null value (which is what getPropertyValue will return
+// for a non-existing style) will still be marked as a valid
+// value for the style (a falsy value implies that the style
+// is to be removed at the end of the animation). If we had a simple
+// "OR" statement then it would not be enough to catch that.
+function registerRestorableStyles(backup, node, properties) {
+  forEach(properties, (prop) => {
+    backup[prop] = isDefined(backup[prop])
+      ? backup[prop]
+      : node.style.getPropertyValue(prop);
+  });
+}
+
+export const $AnimateCssProvider = [
+  function () {
+    this.$get = [
+      "$$AnimateRunner",
+      "$timeout",
+      "$$animateCache",
+      "$$rAFScheduler",
+      "$$animateQueue",
+      function (
+        $$AnimateRunner,
+        $timeout,
+        $$animateCache,
+        $$rAFScheduler,
+        $$animateQueue,
+      ) {
+        const applyAnimationClasses = applyAnimationClassesFactory();
+
+        function computeCachedCssStyles(
+          node,
+          className,
+          cacheKey,
+          allowNoDuration,
+          properties,
+        ) {
+          let timings = $$animateCache.get(cacheKey);
+
+          if (!timings) {
+            timings = computeCssStyles(window, node, properties);
+            if (timings.animationIterationCount === "infinite") {
+              timings.animationIterationCount = 1;
+            }
+          }
+
+          // if a css animation has no duration we
+          // should mark that so that repeated addClass/removeClass calls are skipped
+          const hasDuration =
+            allowNoDuration ||
+            timings.transitionDuration > 0 ||
+            timings.animationDuration > 0;
+
+          // we keep putting this in multiple times even though the value and the cacheKey are the same
+          // because we're keeping an internal tally of how many duplicate animations are detected.
+          $$animateCache.put(cacheKey, timings, hasDuration);
+
+          return timings;
+        }
+
+        function computeCachedCssStaggerStyles(
+          node,
+          className,
+          cacheKey,
+          properties,
+        ) {
+          let stagger;
+          const staggerCacheKey = `stagger-${cacheKey}`;
+
+          // if we have one or more existing matches of matching elements
+          // containing the same parent + CSS styles (which is how cacheKey works)
+          // then staggering is possible
+          if ($$animateCache.count(cacheKey) > 0) {
+            stagger = $$animateCache.get(staggerCacheKey);
+
+            if (!stagger) {
+              const staggerClassName = pendClasses(className, "-stagger");
+
+              node.className += ` ${staggerClassName}`;
+              stagger = computeCssStyles(window, node, properties);
+
+              // force the conversion of a null value to zero incase not set
+              stagger.animationDuration = Math.max(
+                stagger.animationDuration,
+                0,
+              );
+              stagger.transitionDuration = Math.max(
+                stagger.transitionDuration,
+                0,
+              );
+
+              node.classList.remove(staggerClassName);
+
+              $$animateCache.put(staggerCacheKey, stagger, true);
+            }
+          }
+
+          return stagger || {};
+        }
+
+        const rafWaitQueue = [];
+        function waitUntilQuiet(callback) {
+          rafWaitQueue.push(callback);
+          $$rAFScheduler.waitUntilQuiet(() => {
+            $$animateCache.flush();
+
+            // DO NOT REMOVE THIS LINE OR REFACTOR OUT THE `pageWidth` variable.
+            // the line below will force the browser to perform a repaint so
+            // that all the animated elements within the animation frame will
+            // be properly updated and drawn on screen. This is required to
+            // ensure that the preparation animation is properly flushed so that
+            // the active state picks up from there. DO NOT REMOVE THIS LINE.
+            // DO NOT OPTIMIZE THIS LINE. THE MINIFIER WILL REMOVE IT OTHERWISE WHICH
+            // WILL RESULT IN AN UNPREDICTABLE BUG THAT IS VERY HARD TO TRACK DOWN AND
+            // WILL TAKE YEARS AWAY FROM YOUR LIFE.
+
+            const pageWidth = document.body.offsetWidth + 1;
+
+            // we use a for loop to ensure that if the queue is changed
+            // during this looping then it will consider new requests
+            for (let i = 0; i < rafWaitQueue.length; i++) {
+              rafWaitQueue[i](pageWidth);
+            }
+            rafWaitQueue.length = 0;
+          });
+        }
+
+        function computeTimings(node, className, cacheKey, allowNoDuration) {
+          const timings = computeCachedCssStyles(
+            node,
+            className,
+            cacheKey,
+            allowNoDuration,
+            DETECT_CSS_PROPERTIES,
+          );
+          const aD = timings.animationDelay;
+          const tD = timings.transitionDelay;
+          timings.maxDelay = aD && tD ? Math.max(aD, tD) : aD || tD;
+          timings.maxDuration = Math.max(
+            timings.animationDuration * timings.animationIterationCount,
+            timings.transitionDuration,
+          );
+
+          return timings;
+        }
+
+        return function init(element, initialOptions) {
+          // all of the animation functions should create
+          // a copy of the options data, however, if a
+          // parent service has already created a copy then
+          // we should stick to using that
+          let options = initialOptions || {};
+          if (!options.$$prepared) {
+            options = prepareAnimationOptions(structuredClone(options));
+          }
+
+          const restoreStyles = {};
+          const node = getDomNode(element);
+          if (!node || !node.parentNode || !$$animateQueue.enabled()) {
+            return closeAndReturnNoopAnimator();
+          }
+
+          const temporaryStyles = [];
+          const classes = element.attr("class");
+          const styles = packageStyles(options);
+          let animationClosed;
+          let animationPaused;
+          let animationCompleted;
+          let runner;
+          let runnerHost;
+          let maxDelay;
+          let maxDelayTime;
+          let maxDuration;
+          let maxDurationTime;
+          let startTime;
+          const events = [];
+
+          if (options.duration === 0) {
+            return closeAndReturnNoopAnimator();
+          }
+
+          const method =
+            options.event && isArray(options.event)
+              ? options.event.join(" ")
+              : options.event;
+
+          const isStructural = method && options.structural;
+          let structuralClassName = "";
+          let addRemoveClassName = "";
+
+          if (isStructural) {
+            structuralClassName = pendClasses(method, EVENT_CLASS_PREFIX, true);
+          } else if (method) {
+            structuralClassName = method;
+          }
+
+          if (options.addClass) {
+            addRemoveClassName += pendClasses(
+              options.addClass,
+              ADD_CLASS_SUFFIX,
+            );
+          }
+
+          if (options.removeClass) {
+            if (addRemoveClassName.length) {
+              addRemoveClassName += " ";
+            }
+            addRemoveClassName += pendClasses(
+              options.removeClass,
+              REMOVE_CLASS_SUFFIX,
+            );
+          }
+
+          // there may be a situation where a structural animation is combined together
+          // with CSS classes that need to resolve before the animation is computed.
+          // However this means that there is no explicit CSS code to block the animation
+          // from happening (by setting 0s none in the class name). If this is the case
+          // we need to apply the classes before the first rAF so we know to continue if
+          // there actually is a detected transition or keyframe animation
+          if (options.applyClassesEarly && addRemoveClassName.length) {
+            applyAnimationClasses(element, options);
+          }
+
+          let preparationClasses = [structuralClassName, addRemoveClassName]
+            .join(" ")
+            .trim();
+          let fullClassName = `${classes} ${preparationClasses}`;
+          const hasToStyles = styles.to && Object.keys(styles.to).length > 0;
+          const containsKeyframeAnimation =
+            (options.keyframeStyle || "").length > 0;
+
+          // there is no way we can trigger an animation if no styles and
+          // no classes are being applied which would then trigger a transition,
+          // unless there a is raw keyframe value that is applied to the element.
+          if (
+            !containsKeyframeAnimation &&
+            !hasToStyles &&
+            !preparationClasses
+          ) {
+            return closeAndReturnNoopAnimator();
+          }
+
+          let stagger;
+          let cacheKey = $$animateCache.cacheKey(
+            node,
+            method,
+            options.addClass,
+            options.removeClass,
+          );
+          if ($$animateCache.containsCachedAnimationWithoutDuration(cacheKey)) {
+            preparationClasses = null;
+            return closeAndReturnNoopAnimator();
+          }
+
+          if (options.stagger > 0) {
+            const staggerVal = parseFloat(options.stagger);
+            stagger = {
+              transitionDelay: staggerVal,
+              animationDelay: staggerVal,
+              transitionDuration: 0,
+              animationDuration: 0,
+            };
+          } else {
+            stagger = computeCachedCssStaggerStyles(
+              node,
+              preparationClasses,
+              cacheKey,
+              DETECT_STAGGER_CSS_PROPERTIES,
+            );
+          }
+
+          if (!options.$$skipPreparationClasses) {
+            element[0].classList.add(preparationClasses);
+          }
+
+          let applyOnlyDuration;
+
+          if (options.transitionStyle) {
+            const transitionStyle = [TRANSITION_PROP, options.transitionStyle];
+            applyInlineStyle(node, transitionStyle);
+            temporaryStyles.push(transitionStyle);
+          }
+
+          if (options.duration >= 0) {
+            applyOnlyDuration = node.style[TRANSITION_PROP].length > 0;
+            const durationStyle = getCssTransitionDurationStyle(
+              options.duration,
+              applyOnlyDuration,
+            );
+
+            // we set the duration so that it will be picked up by getComputedStyle later
+            applyInlineStyle(node, durationStyle);
+            temporaryStyles.push(durationStyle);
+          }
+
+          if (options.keyframeStyle) {
+            const keyframeStyle = [ANIMATION_PROP, options.keyframeStyle];
+            applyInlineStyle(node, keyframeStyle);
+            temporaryStyles.push(keyframeStyle);
+          }
+
+          const itemIndex = stagger
+            ? options.staggerIndex >= 0
+              ? options.staggerIndex
+              : $$animateCache.count(cacheKey)
+            : 0;
+
+          const isFirst = itemIndex === 0;
+
+          // this is a pre-emptive way of forcing the setup classes to be added and applied INSTANTLY
+          // without causing any combination of transitions to kick in. By adding a negative delay value
+          // it forces the setup class' transition to end immediately. We later then remove the negative
+          // transition delay to allow for the transition to naturally do it's thing. The beauty here is
+          // that if there is no transition defined then nothing will happen and this will also allow
+          // other transitions to be stacked on top of each other without any chopping them out.
+          if (isFirst && !options.skipBlocking) {
+            helpers.blockTransitions(node, SAFE_FAST_FORWARD_DURATION_VALUE);
+          }
+
+          let timings = computeTimings(
+            node,
+            fullClassName,
+            cacheKey,
+            !isStructural,
+          );
+          let relativeDelay = timings.maxDelay;
+          maxDelay = Math.max(relativeDelay, 0);
+          maxDuration = timings.maxDuration;
+
+          const flags = {};
+          flags.hasTransitions = timings.transitionDuration > 0;
+          flags.hasAnimations = timings.animationDuration > 0;
+          flags.hasTransitionAll =
+            flags.hasTransitions && timings.transitionProperty === "all";
+          flags.applyTransitionDuration =
+            hasToStyles &&
+            ((flags.hasTransitions && !flags.hasTransitionAll) ||
+              (flags.hasAnimations && !flags.hasTransitions));
+          flags.applyAnimationDuration =
+            options.duration && flags.hasAnimations;
+          flags.applyTransitionDelay =
+            truthyTimingValue(options.delay) &&
+            (flags.applyTransitionDuration || flags.hasTransitions);
+          flags.applyAnimationDelay =
+            truthyTimingValue(options.delay) && flags.hasAnimations;
+          flags.recalculateTimingStyles = addRemoveClassName.length > 0;
+
+          if (flags.applyTransitionDuration || flags.applyAnimationDuration) {
+            maxDuration = options.duration
+              ? parseFloat(options.duration)
+              : maxDuration;
+
+            if (flags.applyTransitionDuration) {
+              flags.hasTransitions = true;
+              timings.transitionDuration = maxDuration;
+              applyOnlyDuration =
+                node.style[TRANSITION_PROP + PROPERTY_KEY].length > 0;
+              temporaryStyles.push(
+                getCssTransitionDurationStyle(maxDuration, applyOnlyDuration),
+              );
+            }
+
+            if (flags.applyAnimationDuration) {
+              flags.hasAnimations = true;
+              timings.animationDuration = maxDuration;
+              temporaryStyles.push(getCssKeyframeDurationStyle(maxDuration));
+            }
+          }
+
+          if (maxDuration === 0 && !flags.recalculateTimingStyles) {
+            return closeAndReturnNoopAnimator();
+          }
+
+          const activeClasses = pendClasses(
+            preparationClasses,
+            ACTIVE_CLASS_SUFFIX,
+          );
+
+          if (options.delay != null) {
+            var delayStyle;
+            if (typeof options.delay !== "boolean") {
+              delayStyle = parseFloat(options.delay);
+              // number in options.delay means we have to recalculate the delay for the closing timeout
+              maxDelay = Math.max(delayStyle, 0);
+            }
+
+            if (flags.applyTransitionDelay) {
+              temporaryStyles.push(getCssDelayStyle(delayStyle));
+            }
+
+            if (flags.applyAnimationDelay) {
+              temporaryStyles.push(getCssDelayStyle(delayStyle, true));
+            }
+          }
+
+          // we need to recalculate the delay value since we used a pre-emptive negative
+          // delay value and the delay value is required for the final event checking. This
+          // property will ensure that this will happen after the RAF phase has passed.
+          if (options.duration == null && timings.transitionDuration > 0) {
+            flags.recalculateTimingStyles =
+              flags.recalculateTimingStyles || isFirst;
+          }
+
+          maxDelayTime = maxDelay * ONE_SECOND;
+          maxDurationTime = maxDuration * ONE_SECOND;
+          if (!options.skipBlocking) {
+            flags.blockTransition = timings.transitionDuration > 0;
+            flags.blockKeyframeAnimation =
+              timings.animationDuration > 0 &&
+              stagger.animationDelay > 0 &&
+              stagger.animationDuration === 0;
+          }
+
+          if (options.from) {
+            if (options.cleanupStyles) {
+              registerRestorableStyles(
+                restoreStyles,
+                node,
+                Object.keys(options.from),
+              );
+            }
+            applyAnimationFromStyles(element, options);
+          }
+
+          if (flags.blockTransition || flags.blockKeyframeAnimation) {
+            applyBlocking(maxDuration);
+          } else if (!options.skipBlocking) {
+            helpers.blockTransitions(node, false);
+          }
+
+          // TODO(matsko): for 1.5 change this code to have an animator object for better debugging
+          return {
+            $$willAnimate: true,
+            end: endFn,
+            start() {
+              if (animationClosed) return;
+
+              runnerHost = {
+                end: endFn,
+                cancel: cancelFn,
+                resume: null, // this will be set during the start() phase
+                pause: null,
+              };
+
+              runner = new $$AnimateRunner(runnerHost);
+
+              waitUntilQuiet(start);
+
+              // we don't have access to pause/resume the animation
+              // since it hasn't run yet. AnimateRunner will therefore
+              // set noop functions for resume and pause and they will
+              // later be overridden once the animation is triggered
+              return runner;
+            },
+          };
+
+          function endFn() {
+            close();
+          }
+
+          function cancelFn() {
+            close(true);
+          }
+
+          function close(rejected) {
+            // if the promise has been called already then we shouldn't close
+            // the animation again
+            if (animationClosed || (animationCompleted && animationPaused))
+              return;
+            animationClosed = true;
+            animationPaused = false;
+
+            if (preparationClasses && !options.$$skipPreparationClasses) {
+              preparationClasses
+                .split(" ")
+                .forEach((cls) => element.classList.remove(cls));
+            }
+
+            if (activeClasses) {
+              activeClasses
+                .split(" ")
+                .forEach((cls) => element.classList.remove(cls));
+            }
+
+            blockKeyframeAnimations(node, false);
+            helpers.blockTransitions(node, false);
+
+            forEach(temporaryStyles, (entry) => {
+              // There is only one way to remove inline style properties entirely from elements.
+              // By using `removeProperty` this works, but we need to convert camel-cased CSS
+              // styles down to hyphenated values.
+              node.style[entry[0]] = "";
+            });
+
+            applyAnimationClasses(element, options);
+            applyAnimationStyles(element, options);
+
+            if (Object.keys(restoreStyles).length) {
+              forEach(restoreStyles, (value, prop) => {
+                if (value) {
+                  node.style.setProperty(prop, value);
+                } else {
+                  node.style.removeProperty(prop);
+                }
+              });
+            }
+
+            // the reason why we have this option is to allow a synchronous closing callback
+            // that is fired as SOON as the animation ends (when the CSS is removed) or if
+            // the animation never takes off at all. A good example is a leave animation since
+            // the element must be removed just after the animation is over or else the element
+            // will appear on screen for one animation frame causing an overbearing flicker.
+            if (options.onDone) {
+              options.onDone();
+            }
+
+            if (events && events.length) {
+              // Remove the transitionend / animationend listener(s)
+              element.off(events.join(" "), onAnimationProgress);
+            }
+
+            // Cancel the fallback closing timeout and remove the timer data
+            const animationTimerData = element.data(ANIMATE_TIMER_KEY);
+            if (animationTimerData) {
+              $timeout.cancel(animationTimerData[0].timer);
+              element.removeData(ANIMATE_TIMER_KEY);
+            }
+
+            // if the preparation function fails then the promise is not setup
+            if (runner) {
+              runner.complete(!rejected);
+            }
+          }
+
+          function applyBlocking(duration) {
+            if (flags.blockTransition) {
+              helpers.blockTransitions(node, duration);
+            }
+
+            if (flags.blockKeyframeAnimation) {
+              blockKeyframeAnimations(node, !!duration);
+            }
+          }
+
+          function closeAndReturnNoopAnimator() {
+            runner = new $$AnimateRunner({
+              end: endFn,
+              cancel: cancelFn,
+            });
+
+            // should flush the cache animation
+            waitUntilQuiet(() => {});
+            close();
+
+            return {
+              $$willAnimate: false,
+              start() {
+                return runner;
+              },
+              end: endFn,
+            };
+          }
+
+          function onAnimationProgress(event) {
+            event.stopPropagation();
+            const ev = event.originalEvent || event;
+
+            if (ev.target !== node) {
+              // Since TransitionEvent / AnimationEvent bubble up,
+              // we have to ignore events by finished child animations
+              return;
+            }
+
+            // we now always use `Date.now()` due to the recent changes with
+            // event.timeStamp in Firefox, Webkit and Chrome (see #13494 for more info)
+            const timeStamp = ev.$manualTimeStamp || Date.now();
+
+            /* Firefox (or possibly just Gecko) likes to not round values up
+             * when a ms measurement is used for the animation */
+            const elapsedTime = parseFloat(
+              ev.elapsedTime.toFixed(ELAPSED_TIME_MAX_DECIMAL_PLACES),
+            );
+
+            /* $manualTimeStamp is a mocked timeStamp value which is set
+             * within browserTrigger(). This is only here so that tests can
+             * mock animations properly. Real events fallback to event.timeStamp,
+             * or, if they don't, then a timeStamp is automatically created for them.
+             * We're checking to see if the timeStamp surpasses the expected delay,
+             * but we're using elapsedTime instead of the timeStamp on the 2nd
+             * pre-condition since animationPauseds sometimes close off early */
+            if (
+              Math.max(timeStamp - startTime, 0) >= maxDelayTime &&
+              elapsedTime >= maxDuration
+            ) {
+              // we set this flag to ensure that if the transition is paused then, when resumed,
+              // the animation will automatically close itself since transitions cannot be paused.
+              animationCompleted = true;
+              close();
+            }
+          }
+
+          function start() {
+            if (animationClosed) return;
+            if (!node.parentNode) {
+              close();
+              return;
+            }
+
+            // even though we only pause keyframe animations here the pause flag
+            // will still happen when transitions are used. Only the transition will
+            // not be paused since that is not possible. If the animation ends when
+            // paused then it will not complete until unpaused or cancelled.
+            const playPause = function (playAnimation) {
+              if (!animationCompleted) {
+                animationPaused = !playAnimation;
+                if (timings.animationDuration) {
+                  const value = blockKeyframeAnimations(node, animationPaused);
+                  if (animationPaused) {
+                    temporaryStyles.push(value);
+                  } else {
+                    removeFromArray(temporaryStyles, value);
+                  }
+                }
+              } else if (animationPaused && playAnimation) {
+                animationPaused = false;
+                close();
+              }
+            };
+
+            // checking the stagger duration prevents an accidentally cascade of the CSS delay style
+            // being inherited from the parent. If the transition duration is zero then we can safely
+            // rely that the delay value is an intentional stagger delay style.
+            const maxStagger =
+              itemIndex > 0 &&
+              ((timings.transitionDuration &&
+                stagger.transitionDuration === 0) ||
+                (timings.animationDuration &&
+                  stagger.animationDuration === 0)) &&
+              Math.max(stagger.animationDelay, stagger.transitionDelay);
+            if (maxStagger) {
+              $timeout(
+                triggerAnimationStart,
+                Math.floor(maxStagger * itemIndex * ONE_SECOND),
+                false,
+              );
+            } else {
+              triggerAnimationStart();
+            }
+
+            // this will decorate the existing promise runner with pause/resume methods
+            runnerHost.resume = function () {
+              playPause(true);
+            };
+
+            runnerHost.pause = function () {
+              playPause(false);
+            };
+
+            function triggerAnimationStart() {
+              // just incase a stagger animation kicks in when the animation
+              // itself was cancelled entirely
+              if (animationClosed) return;
+
+              applyBlocking(false);
+
+              forEach(temporaryStyles, (entry) => {
+                const key = entry[0];
+                const value = entry[1];
+                node.style[key] = value;
+              });
+
+              applyAnimationClasses(element, options);
+              element.className += ` ${activeClasses}`;
+              if (flags.recalculateTimingStyles) {
+                fullClassName = `${node.getAttribute("class")} ${preparationClasses}`;
+                cacheKey = $$animateCache.cacheKey(
+                  node,
+                  method,
+                  options.addClass,
+                  options.removeClass,
+                );
+
+                timings = computeTimings(node, fullClassName, cacheKey, false);
+                relativeDelay = timings.maxDelay;
+                maxDelay = Math.max(relativeDelay, 0);
+                maxDuration = timings.maxDuration;
+
+                if (maxDuration === 0) {
+                  close();
+                  return;
+                }
+
+                flags.hasTransitions = timings.transitionDuration > 0;
+                flags.hasAnimations = timings.animationDuration > 0;
+              }
+
+              if (flags.applyAnimationDelay) {
+                relativeDelay =
+                  typeof options.delay !== "boolean" &&
+                  truthyTimingValue(options.delay)
+                    ? parseFloat(options.delay)
+                    : relativeDelay;
+
+                maxDelay = Math.max(relativeDelay, 0);
+                timings.animationDelay = relativeDelay;
+                delayStyle = getCssDelayStyle(relativeDelay, true);
+                temporaryStyles.push(delayStyle);
+                node.style[delayStyle[0]] = delayStyle[1];
+              }
+
+              maxDelayTime = maxDelay * ONE_SECOND;
+              maxDurationTime = maxDuration * ONE_SECOND;
+
+              if (options.easing) {
+                let easeProp;
+                const easeVal = options.easing;
+                if (flags.hasTransitions) {
+                  easeProp = TRANSITION_PROP + TIMING_KEY;
+                  temporaryStyles.push([easeProp, easeVal]);
+                  node.style[easeProp] = easeVal;
+                }
+                if (flags.hasAnimations) {
+                  easeProp = ANIMATION_PROP + TIMING_KEY;
+                  temporaryStyles.push([easeProp, easeVal]);
+                  node.style[easeProp] = easeVal;
+                }
+              }
+
+              if (timings.transitionDuration) {
+                events.push(TRANSITIONEND_EVENT);
+              }
+
+              if (timings.animationDuration) {
+                events.push(ANIMATIONEND_EVENT);
+              }
+
+              startTime = Date.now();
+              const timerTime =
+                maxDelayTime + CLOSING_TIME_BUFFER * maxDurationTime;
+              const endTime = startTime + timerTime;
+
+              const animationsData = element.data(ANIMATE_TIMER_KEY) || [];
+              let setupFallbackTimer = true;
+              if (animationsData.length) {
+                const currentTimerData = animationsData[0];
+                setupFallbackTimer = endTime > currentTimerData.expectedEndTime;
+                if (setupFallbackTimer) {
+                  $timeout.cancel(currentTimerData.timer);
+                } else {
+                  animationsData.push(close);
+                }
+              }
+
+              if (setupFallbackTimer) {
+                const timer = $timeout(onAnimationExpired, timerTime, false);
+                animationsData[0] = {
+                  timer,
+                  expectedEndTime: endTime,
+                };
+                animationsData.push(close);
+                element.data(ANIMATE_TIMER_KEY, animationsData);
+              }
+
+              if (events.length) {
+                element.on(events.join(" "), onAnimationProgress);
+              }
+
+              if (options.to) {
+                if (options.cleanupStyles) {
+                  registerRestorableStyles(
+                    restoreStyles,
+                    node,
+                    Object.keys(options.to),
+                  );
+                }
+                applyAnimationToStyles(element, options);
+              }
+            }
+
+            function onAnimationExpired() {
+              const animationsData = element.data(ANIMATE_TIMER_KEY);
+
+              // this will be false in the event that the element was
+              // removed from the DOM (via a leave animation or something
+              // similar)
+              if (animationsData) {
+                for (let i = 1; i < animationsData.length; i++) {
+                  animationsData[i]();
+                }
+                element.removeData(ANIMATE_TIMER_KEY);
+              }
+            }
+          }
+        };
+      },
+    ];
+  },
+];