@angular-wave/angular.ts 0.0.51 → 0.0.53

package/src/animations/animate-css.js

@@ -32,220 +32,6 @@ import {
 
 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;
@@ -351,791 +137,776 @@ function registerRestorableStyles(backup, node, properties) {
   });
 }
 
-export const $AnimateCssProvider = [
-  function () {
-    this.$get = [
-      "$$AnimateRunner",
-      "$timeout",
-      "$$animateCache",
-      "$$rAFScheduler",
-      "$$animateQueue",
-      function (
-        $$AnimateRunner,
-        $timeout,
-        $$animateCache,
-        $$rAFScheduler,
-        $$animateQueue,
+export function $AnimateCssProvider() {
+  this.$get = [
+    "$$AnimateRunner",
+    "$timeout",
+    "$$animateCache",
+    "$$rAFScheduler",
+    "$$animateQueue",
+    function (
+      $$AnimateRunner,
+      $timeout,
+      $$animateCache,
+      $$rAFScheduler,
+      $$animateQueue,
+    ) {
+      const applyAnimationClasses = applyAnimationClassesFactory();
+
+      function computeCachedCssStyles(
+        node,
+        className,
+        cacheKey,
+        allowNoDuration,
+        properties,
       ) {
-        const applyAnimationClasses = applyAnimationClassesFactory();
+        let timings = $$animateCache.get(cacheKey);
 
-        function computeCachedCssStyles(
-          node,
-          className,
-          cacheKey,
-          allowNoDuration,
-          properties,
-        ) {
-          let timings = $$animateCache.get(cacheKey);
-
-          if (!timings) {
-            timings = computeCssStyles(node, properties);
-            if (timings.animationIterationCount === "infinite") {
-              timings.animationIterationCount = 1;
-            }
+        if (!timings) {
+          timings = computeCssStyles(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;
+        // 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);
+        // 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;
+      }
 
-          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(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);
+          }
         }
 
-        function computeCachedCssStaggerStyles(
+        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,
-          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(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,
-              );
+          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;
+      }
 
-              node.classList.remove(staggerClassName);
+      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));
+        }
 
-              $$animateCache.put(staggerCacheKey, stagger, true);
-            }
+        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 && Array.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,
+          );
+        }
 
-          return stagger || {};
+        // 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);
         }
 
-        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;
-          });
+        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();
         }
 
-        function computeTimings(node, className, cacheKey, allowNoDuration) {
-          const timings = computeCachedCssStyles(
+        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,
-            className,
+            preparationClasses,
             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,
+            DETECT_STAGGER_CSS_PROPERTIES,
           );
+        }
 
-          return timings;
+        if (!options.$$skipPreparationClasses) {
+          element[0].classList.add(preparationClasses);
         }
 
-        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));
-          }
+        let applyOnlyDuration;
 
-          const restoreStyles = {};
-          const node = getDomNode(element);
-          if (!node || !node.parentNode || !$$animateQueue.enabled()) {
-            return closeAndReturnNoopAnimator();
-          }
+        if (options.transitionStyle) {
+          const transitionStyle = [TRANSITION_PROP, options.transitionStyle];
+          applyInlineStyle(node, transitionStyle);
+          temporaryStyles.push(transitionStyle);
+        }
 
-          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();
-          }
+        if (options.duration >= 0) {
+          applyOnlyDuration = node.style[TRANSITION_PROP].length > 0;
+          const durationStyle = getCssTransitionDurationStyle(
+            options.duration,
+            applyOnlyDuration,
+          );
 
-          const method =
-            options.event && Array.isArray(options.event)
-              ? options.event.join(" ")
-              : options.event;
+          // we set the duration so that it will be picked up by getComputedStyle later
+          applyInlineStyle(node, durationStyle);
+          temporaryStyles.push(durationStyle);
+        }
 
-          const isStructural = method && options.structural;
-          let structuralClassName = "";
-          let addRemoveClassName = "";
+        if (options.keyframeStyle) {
+          const keyframeStyle = [ANIMATION_PROP, options.keyframeStyle];
+          applyInlineStyle(node, keyframeStyle);
+          temporaryStyles.push(keyframeStyle);
+        }
 
-          if (isStructural) {
-            structuralClassName = pendClasses(method, EVENT_CLASS_PREFIX, true);
-          } else if (method) {
-            structuralClassName = method;
-          }
+        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) {
+          blockTransitions(node, SAFE_FAST_FORWARD_DURATION_VALUE);
+        }
 
-          if (options.addClass) {
-            addRemoveClassName += pendClasses(
-              options.addClass,
-              ADD_CLASS_SUFFIX,
+        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 (options.removeClass) {
-            if (addRemoveClassName.length) {
-              addRemoveClassName += " ";
-            }
-            addRemoveClassName += pendClasses(
-              options.removeClass,
-              REMOVE_CLASS_SUFFIX,
-            );
+          if (flags.applyAnimationDuration) {
+            flags.hasAnimations = true;
+            timings.animationDuration = maxDuration;
+            temporaryStyles.push(getCssKeyframeDurationStyle(maxDuration));
           }
+        }
 
-          // 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);
+        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);
           }
 
-          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();
+          if (flags.applyTransitionDelay) {
+            temporaryStyles.push(getCssDelayStyle(delayStyle));
           }
 
-          let stagger;
-          let cacheKey = $$animateCache.cacheKey(
-            node,
-            method,
-            options.addClass,
-            options.removeClass,
-          );
-          if ($$animateCache.containsCachedAnimationWithoutDuration(cacheKey)) {
-            preparationClasses = null;
-            return closeAndReturnNoopAnimator();
+          if (flags.applyAnimationDelay) {
+            temporaryStyles.push(getCssDelayStyle(delayStyle, true));
           }
+        }
 
-          if (options.stagger > 0) {
-            const staggerVal = parseFloat(options.stagger);
-            stagger = {
-              transitionDelay: staggerVal,
-              animationDelay: staggerVal,
-              transitionDuration: 0,
-              animationDuration: 0,
-            };
-          } else {
-            stagger = computeCachedCssStaggerStyles(
+        // 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,
-              preparationClasses,
-              cacheKey,
-              DETECT_STAGGER_CSS_PROPERTIES,
+              Object.keys(options.from),
             );
           }
+          applyAnimationFromStyles(element, options);
+        }
 
-          if (!options.$$skipPreparationClasses) {
-            element[0].classList.add(preparationClasses);
-          }
+        if (flags.blockTransition || flags.blockKeyframeAnimation) {
+          applyBlocking(maxDuration);
+        } else if (!options.skipBlocking) {
+          blockTransitions(node, false);
+        }
 
-          let applyOnlyDuration;
+        // 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;
 
-          if (options.transitionStyle) {
-            const transitionStyle = [TRANSITION_PROP, options.transitionStyle];
-            applyInlineStyle(node, transitionStyle);
-            temporaryStyles.push(transitionStyle);
-          }
+            runnerHost = {
+              end: endFn,
+              cancel: cancelFn,
+              resume: null, // this will be set during the start() phase
+              pause: null,
+            };
 
-          if (options.duration >= 0) {
-            applyOnlyDuration = node.style[TRANSITION_PROP].length > 0;
-            const durationStyle = getCssTransitionDurationStyle(
-              options.duration,
-              applyOnlyDuration,
-            );
+            runner = new $$AnimateRunner(runnerHost);
 
-            // we set the duration so that it will be picked up by getComputedStyle later
-            applyInlineStyle(node, durationStyle);
-            temporaryStyles.push(durationStyle);
-          }
+            waitUntilQuiet(start);
 
-          if (options.keyframeStyle) {
-            const keyframeStyle = [ANIMATION_PROP, options.keyframeStyle];
-            applyInlineStyle(node, keyframeStyle);
-            temporaryStyles.push(keyframeStyle);
-          }
+            // 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;
+          },
+        };
 
-          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) {
-            blockTransitions(node, SAFE_FAST_FORWARD_DURATION_VALUE);
-          }
+        function endFn() {
+          close();
+        }
 
-          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),
-              );
-            }
+        function cancelFn() {
+          close(true);
+        }
 
-            if (flags.applyAnimationDuration) {
-              flags.hasAnimations = true;
-              timings.animationDuration = maxDuration;
-              temporaryStyles.push(getCssKeyframeDurationStyle(maxDuration));
-            }
+        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 (maxDuration === 0 && !flags.recalculateTimingStyles) {
-            return closeAndReturnNoopAnimator();
+          if (activeClasses) {
+            activeClasses
+              .split(" ")
+              .forEach((cls) => element.classList.remove(cls));
           }
 
-          const activeClasses = pendClasses(
-            preparationClasses,
-            ACTIVE_CLASS_SUFFIX,
-          );
+          blockKeyframeAnimations(node, false);
+          blockTransitions(node, false);
 
-          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);
-            }
+          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]] = "";
+          });
 
-            if (flags.applyTransitionDelay) {
-              temporaryStyles.push(getCssDelayStyle(delayStyle));
-            }
+          applyAnimationClasses(element, options);
+          applyAnimationStyles(element, options);
 
-            if (flags.applyAnimationDelay) {
-              temporaryStyles.push(getCssDelayStyle(delayStyle, true));
-            }
+          if (Object.keys(restoreStyles).length) {
+            forEach(restoreStyles, (value, prop) => {
+              if (value) {
+                node.style.setProperty(prop, value);
+              } else {
+                node.style.removeProperty(prop);
+              }
+            });
           }
 
-          // 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;
+          // 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();
           }
 
-          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 (events && events.length) {
+            // Remove the transitionend / animationend listener(s)
+            element.off(events.join(" "), onAnimationProgress);
           }
 
-          if (options.from) {
-            if (options.cleanupStyles) {
-              registerRestorableStyles(
-                restoreStyles,
-                node,
-                Object.keys(options.from),
-              );
-            }
-            applyAnimationFromStyles(element, options);
+          // 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 (flags.blockTransition || flags.blockKeyframeAnimation) {
-            applyBlocking(maxDuration);
-          } else if (!options.skipBlocking) {
-            blockTransitions(node, false);
+          // if the preparation function fails then the promise is not setup
+          if (runner) {
+            runner.complete(!rejected);
           }
+        }
 
-          // 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;
+        function applyBlocking(duration) {
+          if (flags.blockTransition) {
+            blockTransitions(node, duration);
+          }
 
-              runnerHost = {
-                end: endFn,
-                cancel: cancelFn,
-                resume: null, // this will be set during the start() phase
-                pause: null,
-              };
+          if (flags.blockKeyframeAnimation) {
+            blockKeyframeAnimations(node, !!duration);
+          }
+        }
 
-              runner = new $$AnimateRunner(runnerHost);
+        function closeAndReturnNoopAnimator() {
+          runner = new $$AnimateRunner({
+            end: endFn,
+            cancel: cancelFn,
+          });
 
-              waitUntilQuiet(start);
+          // should flush the cache animation
+          waitUntilQuiet(() => {});
+          close();
 
-              // 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 {
+            $$willAnimate: false,
+            start() {
               return runner;
             },
+            end: endFn,
           };
+        }
 
-          function endFn() {
-            close();
-          }
+        function onAnimationProgress(event) {
+          event.stopPropagation();
+          const ev = event.originalEvent || event;
 
-          function cancelFn() {
-            close(true);
+          if (ev.target !== node) {
+            // Since TransitionEvent / AnimationEvent bubble up,
+            // we have to ignore events by finished child animations
+            return;
           }
 
-          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));
-            }
+          // 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();
 
-            if (activeClasses) {
-              activeClasses
-                .split(" ")
-                .forEach((cls) => element.classList.remove(cls));
-            }
-
-            blockKeyframeAnimations(node, false);
-            blockTransitions(node, false);
+          /* 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),
+          );
 
-            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]] = "";
-            });
+          /* $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();
+          }
+        }
 
-            applyAnimationClasses(element, options);
-            applyAnimationStyles(element, options);
+        function start() {
+          if (animationClosed) return;
+          if (!node.parentNode) {
+            close();
+            return;
+          }
 
-            if (Object.keys(restoreStyles).length) {
-              forEach(restoreStyles, (value, prop) => {
-                if (value) {
-                  node.style.setProperty(prop, value);
+          // 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 {
-                  node.style.removeProperty(prop);
+                  removeFromArray(temporaryStyles, value);
                 }
-              });
-            }
-
-            // 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) {
-              blockTransitions(node, duration);
+              }
+            } else if (animationPaused && playAnimation) {
+              animationPaused = false;
+              close();
             }
+          };
 
-            if (flags.blockKeyframeAnimation) {
-              blockKeyframeAnimations(node, !!duration);
-            }
+          // 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();
           }
 
-          function closeAndReturnNoopAnimator() {
-            runner = new $$AnimateRunner({
-              end: endFn,
-              cancel: cancelFn,
-            });
-
-            // should flush the cache animation
-            waitUntilQuiet(() => {});
-            close();
-
-            return {
-              $$willAnimate: false,
-              start() {
-                return runner;
-              },
-              end: endFn,
-            };
-          }
+          // this will decorate the existing promise runner with pause/resume methods
+          runnerHost.resume = function () {
+            playPause(true);
+          };
 
-          function onAnimationProgress(event) {
-            event.stopPropagation();
-            const ev = event.originalEvent || event;
+          runnerHost.pause = function () {
+            playPause(false);
+          };
 
-            if (ev.target !== node) {
-              // Since TransitionEvent / AnimationEvent bubble up,
-              // we have to ignore events by finished child animations
-              return;
-            }
+          function triggerAnimationStart() {
+            // just incase a stagger animation kicks in when the animation
+            // itself was cancelled entirely
+            if (animationClosed) 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();
+            applyBlocking(false);
 
-            /* 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),
-            );
+            forEach(temporaryStyles, (entry) => {
+              const key = entry[0];
+              const value = entry[1];
+              node.style[key] = value;
+            });
 
-            /* $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();
-            }
-          }
+            applyAnimationClasses(element, options);
+            element.className += ` ${activeClasses}`;
+            if (flags.recalculateTimingStyles) {
+              fullClassName = `${node.getAttribute("class")} ${preparationClasses}`;
+              cacheKey = $$animateCache.cacheKey(
+                node,
+                method,
+                options.addClass,
+                options.removeClass,
+              );
 
-          function start() {
-            if (animationClosed) return;
-            if (!node.parentNode) {
-              close();
-              return;
-            }
+              timings = computeTimings(node, fullClassName, cacheKey, false);
+              relativeDelay = timings.maxDelay;
+              maxDelay = Math.max(relativeDelay, 0);
+              maxDuration = timings.maxDuration;
 
-            // 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;
+              if (maxDuration === 0) {
                 close();
+                return;
               }
-            };
 
-            // 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();
+              flags.hasTransitions = timings.transitionDuration > 0;
+              flags.hasAnimations = timings.animationDuration > 0;
             }
 
-            // 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,
-                );
+            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];
+            }
 
-                timings = computeTimings(node, fullClassName, cacheKey, false);
-                relativeDelay = timings.maxDelay;
-                maxDelay = Math.max(relativeDelay, 0);
-                maxDuration = timings.maxDuration;
+            maxDelayTime = maxDelay * ONE_SECOND;
+            maxDurationTime = maxDuration * ONE_SECOND;
 
-                if (maxDuration === 0) {
-                  close();
-                  return;
-                }
-
-                flags.hasTransitions = timings.transitionDuration > 0;
-                flags.hasAnimations = timings.animationDuration > 0;
+            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.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 (flags.hasAnimations) {
+                easeProp = ANIMATION_PROP + TIMING_KEY;
+                temporaryStyles.push([easeProp, easeVal]);
+                node.style[easeProp] = easeVal;
               }
+            }
 
-              if (timings.transitionDuration) {
-                events.push(TRANSITIONEND_EVENT);
-              }
+            if (timings.transitionDuration) {
+              events.push(TRANSITIONEND_EVENT);
+            }
 
-              if (timings.animationDuration) {
-                events.push(ANIMATIONEND_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);
-                }
-              }
+            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) {
-                const timer = $timeout(onAnimationExpired, timerTime, false);
-                animationsData[0] = {
-                  timer,
-                  expectedEndTime: endTime,
-                };
+                $timeout.cancel(currentTimerData.timer);
+              } else {
                 animationsData.push(close);
-                element.data(ANIMATE_TIMER_KEY, animationsData);
               }
+            }
 
-              if (events.length) {
-                element.on(events.join(" "), onAnimationProgress);
-              }
+            if (setupFallbackTimer) {
+              const timer = $timeout(onAnimationExpired, timerTime, false);
+              animationsData[0] = {
+                timer,
+                expectedEndTime: endTime,
+              };
+              animationsData.push(close);
+              element.data(ANIMATE_TIMER_KEY, animationsData);
+            }
 
-              if (options.to) {
-                if (options.cleanupStyles) {
-                  registerRestorableStyles(
-                    restoreStyles,
-                    node,
-                    Object.keys(options.to),
-                  );
-                }
-                applyAnimationToStyles(element, options);
+            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);
+          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);
+            // 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);
             }
           }
-        };
-      },
-    ];
-  },
-];
+        }
+      };
+    },
+  ];
+}
 
 function blockTransitions(node, duration) {
   // we use a negative delay value since it performs blocking