https://zeti.co/static/angular-animate/angular-animate.js

1/**
2 * @license AngularJS v1.6.6
3 * (c) 2010-2017 Google, Inc. http://angularjs.org
4 * License: MIT
5 */
6(function(window, angular) {'use strict';
7
8var ELEMENT_NODE = 1;
9var COMMENT_NODE = 8;
10
11var ADD_CLASS_SUFFIX = '-add';
12var REMOVE_CLASS_SUFFIX = '-remove';
13var EVENT_CLASS_PREFIX = 'ng-';
14var ACTIVE_CLASS_SUFFIX = '-active';
15var PREPARE_CLASS_SUFFIX = '-prepare';
16
17var NG_ANIMATE_CLASSNAME = 'ng-animate';
18var NG_ANIMATE_CHILDREN_DATA = '$$ngAnimateChildren';
19
20// Detect proper transitionend/animationend event names.
21var CSS_PREFIX = '', TRANSITION_PROP, TRANSITIONEND_EVENT, ANIMATION_PROP, ANIMATIONEND_EVENT;
22
23// If unprefixed events are not supported but webkit-prefixed are, use the latter.
24// Otherwise, just use W3C names, browsers not supporting them at all will just ignore them.
25// Note: Chrome implements `window.onwebkitanimationend` and doesn't implement `window.onanimationend`
26// but at the same time dispatches the `animationend` event and not `webkitAnimationEnd`.
27// Register both events in case `window.onanimationend` is not supported because of that,
28// do the same for `transitionend` as Safari is likely to exhibit similar behavior.
29// Also, the only modern browser that uses vendor prefixes for transitions/keyframes is webkit
30// therefore there is no reason to test anymore for other vendor prefixes:
31// http://caniuse.com/#search=transition
32if ((window.ontransitionend === undefined) && (window.onwebkittransitionend !== undefined)) {
33  CSS_PREFIX = '-webkit-';
34  TRANSITION_PROP = 'WebkitTransition';
35  TRANSITIONEND_EVENT = 'webkitTransitionEnd transitionend';
36} else {
37  TRANSITION_PROP = 'transition';
38  TRANSITIONEND_EVENT = 'transitionend';
39}
40
41if ((window.onanimationend === undefined) && (window.onwebkitanimationend !== undefined)) {
42  CSS_PREFIX = '-webkit-';
43  ANIMATION_PROP = 'WebkitAnimation';
44  ANIMATIONEND_EVENT = 'webkitAnimationEnd animationend';
45} else {
46  ANIMATION_PROP = 'animation';
47  ANIMATIONEND_EVENT = 'animationend';
48}
49
50var DURATION_KEY = 'Duration';
51var PROPERTY_KEY = 'Property';
52var DELAY_KEY = 'Delay';
53var TIMING_KEY = 'TimingFunction';
54var ANIMATION_ITERATION_COUNT_KEY = 'IterationCount';
55var ANIMATION_PLAYSTATE_KEY = 'PlayState';
56var SAFE_FAST_FORWARD_DURATION_VALUE = 9999;
57
58var ANIMATION_DELAY_PROP = ANIMATION_PROP + DELAY_KEY;
59var ANIMATION_DURATION_PROP = ANIMATION_PROP + DURATION_KEY;
60var TRANSITION_DELAY_PROP = TRANSITION_PROP + DELAY_KEY;
61var TRANSITION_DURATION_PROP = TRANSITION_PROP + DURATION_KEY;
62
63var ngMinErr = angular.$$minErr('ng');
64function assertArg(arg, name, reason) {
65  if (!arg) {
66    throw ngMinErr('areq', 'Argument \'{0}\' is {1}', (name || '?'), (reason || 'required'));
67  }
68  return arg;
69}
70
71function mergeClasses(a,b) {
72  if (!a && !b) return '';
73  if (!a) return b;
74  if (!b) return a;
75  if (isArray(a)) a = a.join(' ');
76  if (isArray(b)) b = b.join(' ');
77  return a + ' ' + b;
78}
79
80function packageStyles(options) {
81  var styles = {};
82  if (options && (options.to || options.from)) {
83    styles.to = options.to;
84    styles.from = options.from;
85  }
86  return styles;
87}
88
89function pendClasses(classes, fix, isPrefix) {
90  var className = '';
91  classes = isArray(classes)
92      ? classes
93      : classes && isString(classes) && classes.length
94          ? classes.split(/\s+/)
95          : [];
96  forEach(classes, function(klass, i) {
97    if (klass && klass.length > 0) {
98      className += (i > 0) ? ' ' : '';
99      className += isPrefix ? fix + klass
100                            : klass + fix;
101    }
102  });
103  return className;
104}
105
106function removeFromArray(arr, val) {
107  var index = arr.indexOf(val);
108  if (val >= 0) {
109    arr.splice(index, 1);
110  }
111}
112
113function stripCommentsFromElement(element) {
114  if (element instanceof jqLite) {
115    switch (element.length) {
116      case 0:
117        return element;
118
119      case 1:
120        // there is no point of stripping anything if the element
121        // is the only element within the jqLite wrapper.
122        // (it's important that we retain the element instance.)
123        if (element[0].nodeType === ELEMENT_NODE) {
124          return element;
125        }
126        break;
127
128      default:
129        return jqLite(extractElementNode(element));
130    }
131  }
132
133  if (element.nodeType === ELEMENT_NODE) {
134    return jqLite(element);
135  }
136}
137
138function extractElementNode(element) {
139  if (!element[0]) return element;
140  for (var i = 0; i < element.length; i++) {
141    var elm = element[i];
142    if (elm.nodeType === ELEMENT_NODE) {
143      return elm;
144    }
145  }
146}
147
148function $$addClass($$jqLite, element, className) {
149  forEach(element, function(elm) {
150    $$jqLite.addClass(elm, className);
151  });
152}
153
154function $$removeClass($$jqLite, element, className) {
155  forEach(element, function(elm) {
156    $$jqLite.removeClass(elm, className);
157  });
158}
159
160function applyAnimationClassesFactory($$jqLite) {
161  return function(element, options) {
162    if (options.addClass) {
163      $$addClass($$jqLite, element, options.addClass);
164      options.addClass = null;
165    }
166    if (options.removeClass) {
167      $$removeClass($$jqLite, element, options.removeClass);
168      options.removeClass = null;
169    }
170  };
171}
172
173function prepareAnimationOptions(options) {
174  options = options || {};
175  if (!options.$$prepared) {
176    var domOperation = options.domOperation || noop;
177    options.domOperation = function() {
178      options.$$domOperationFired = true;
179      domOperation();
180      domOperation = noop;
181    };
182    options.$$prepared = true;
183  }
184  return options;
185}
186
187function applyAnimationStyles(element, options) {
188  applyAnimationFromStyles(element, options);
189  applyAnimationToStyles(element, options);
190}
191
192function applyAnimationFromStyles(element, options) {
193  if (options.from) {
194    element.css(options.from);
195    options.from = null;
196  }
197}
198
199function applyAnimationToStyles(element, options) {
200  if (options.to) {
201    element.css(options.to);
202    options.to = null;
203  }
204}
205
206function mergeAnimationDetails(element, oldAnimation, newAnimation) {
207  var target = oldAnimation.options || {};
208  var newOptions = newAnimation.options || {};
209
210  var toAdd = (target.addClass || '') + ' ' + (newOptions.addClass || '');
211  var toRemove = (target.removeClass || '') + ' ' + (newOptions.removeClass || '');
212  var classes = resolveElementClasses(element.attr('class'), toAdd, toRemove);
213
214  if (newOptions.preparationClasses) {
215    target.preparationClasses = concatWithSpace(newOptions.preparationClasses, target.preparationClasses);
216    delete newOptions.preparationClasses;
217  }
218
219  // noop is basically when there is no callback; otherwise something has been set
220  var realDomOperation = target.domOperation !== noop ? target.domOperation : null;
221
222  extend(target, newOptions);
223
224  // TODO(matsko or sreeramu): proper fix is to maintain all animation callback in array and call at last,but now only leave has the callback so no issue with this.
225  if (realDomOperation) {
226    target.domOperation = realDomOperation;
227  }
228
229  if (classes.addClass) {
230    target.addClass = classes.addClass;
231  } else {
232    target.addClass = null;
233  }
234
235  if (classes.removeClass) {
236    target.removeClass = classes.removeClass;
237  } else {
238    target.removeClass = null;
239  }
240
241  oldAnimation.addClass = target.addClass;
242  oldAnimation.removeClass = target.removeClass;
243
244  return target;
245}
246
247function resolveElementClasses(existing, toAdd, toRemove) {
248  var ADD_CLASS = 1;
249  var REMOVE_CLASS = -1;
250
251  var flags = {};
252  existing = splitClassesToLookup(existing);
253
254  toAdd = splitClassesToLookup(toAdd);
255  forEach(toAdd, function(value, key) {
256    flags[key] = ADD_CLASS;
257  });
258
259  toRemove = splitClassesToLookup(toRemove);
260  forEach(toRemove, function(value, key) {
261    flags[key] = flags[key] === ADD_CLASS ? null : REMOVE_CLASS;
262  });
263
264  var classes = {
265    addClass: '',
266    removeClass: ''
267  };
268
269  forEach(flags, function(val, klass) {
270    var prop, allow;
271    if (val === ADD_CLASS) {
272      prop = 'addClass';
273      allow = !existing[klass] || existing[klass + REMOVE_CLASS_SUFFIX];
274    } else if (val === REMOVE_CLASS) {
275      prop = 'removeClass';
276      allow = existing[klass] || existing[klass + ADD_CLASS_SUFFIX];
277    }
278    if (allow) {
279      if (classes[prop].length) {
280        classes[prop] += ' ';
281      }
282      classes[prop] += klass;
283    }
284  });
285
286  function splitClassesToLookup(classes) {
287    if (isString(classes)) {
288      classes = classes.split(' ');
289    }
290
291    var obj = {};
292    forEach(classes, function(klass) {
293      // sometimes the split leaves empty string values
294      // incase extra spaces were applied to the options
295      if (klass.length) {
296        obj[klass] = true;
297      }
298    });
299    return obj;
300  }
301
302  return classes;
303}
304
305function getDomNode(element) {
306  return (element instanceof jqLite) ? element[0] : element;
307}
308
309function applyGeneratedPreparationClasses(element, event, options) {
310  var classes = '';
311  if (event) {
312    classes = pendClasses(event, EVENT_CLASS_PREFIX, true);
313  }
314  if (options.addClass) {
315    classes = concatWithSpace(classes, pendClasses(options.addClass, ADD_CLASS_SUFFIX));
316  }
317  if (options.removeClass) {
318    classes = concatWithSpace(classes, pendClasses(options.removeClass, REMOVE_CLASS_SUFFIX));
319  }
320  if (classes.length) {
321    options.preparationClasses = classes;
322    element.addClass(classes);
323  }
324}
325
326function clearGeneratedClasses(element, options) {
327  if (options.preparationClasses) {
328    element.removeClass(options.preparationClasses);
329    options.preparationClasses = null;
330  }
331  if (options.activeClasses) {
332    element.removeClass(options.activeClasses);
333    options.activeClasses = null;
334  }
335}
336
337function blockTransitions(node, duration) {
338  // we use a negative delay value since it performs blocking
339  // yet it doesn't kill any existing transitions running on the
340  // same element which makes this safe for class-based animations
341  var value = duration ? '-' + duration + 's' : '';
342  applyInlineStyle(node, [TRANSITION_DELAY_PROP, value]);
343  return [TRANSITION_DELAY_PROP, value];
344}
345
346function blockKeyframeAnimations(node, applyBlock) {
347  var value = applyBlock ? 'paused' : '';
348  var key = ANIMATION_PROP + ANIMATION_PLAYSTATE_KEY;
349  applyInlineStyle(node, [key, value]);
350  return [key, value];
351}
352
353function applyInlineStyle(node, styleTuple) {
354  var prop = styleTuple[0];
355  var value = styleTuple[1];
356  node.style[prop] = value;
357}
358
359function concatWithSpace(a,b) {
360  if (!a) return b;
361  if (!b) return a;
362  return a + ' ' + b;
363}
364
365var $$rAFSchedulerFactory = ['$$rAF', function($$rAF) {
366  var queue, cancelFn;
367
368  function scheduler(tasks) {
369    // we make a copy since RAFScheduler mutates the state
370    // of the passed in array variable and this would be difficult
371    // to track down on the outside code
372    queue = queue.concat(tasks);
373    nextTick();
374  }
375
376  queue = scheduler.queue = [];
377
378  /* waitUntilQuiet does two things:
379   * 1. It will run the FINAL `fn` value only when an uncanceled RAF has passed through
380   * 2. It will delay the next wave of tasks from running until the quiet `fn` has run.
381   *
382   * The motivation here is that animation code can request more time from the scheduler
383   * before the next wave runs. This allows for certain DOM properties such as classes to
384   * be resolved in time for the next animation to run.
385   */
386  scheduler.waitUntilQuiet = function(fn) {
387    if (cancelFn) cancelFn();
388
389    cancelFn = $$rAF(function() {
390      cancelFn = null;
391      fn();
392      nextTick();
393    });
394  };
395
396  return scheduler;
397
398  function nextTick() {
399    if (!queue.length) return;
400
401    var items = queue.shift();
402    for (var i = 0; i < items.length; i++) {
403      items[i]();
404    }
405
406    if (!cancelFn) {
407      $$rAF(function() {
408        if (!cancelFn) nextTick();
409      });
410    }
411  }
412}];
413
414/**
415 * @ngdoc directive
416 * @name ngAnimateChildren
417 * @restrict AE
418 * @element ANY
419 *
420 * @description
421 *
422 * ngAnimateChildren allows you to specify that children of this element should animate even if any
423 * of the children's parents are currently animating. By default, when an element has an active `enter`, `leave`, or `move`
424 * (structural) animation, child elements that also have an active structural animation are not animated.
425 *
426 * Note that even if `ngAnimateChildren` is set, no child animations will run when the parent element is removed from the DOM (`leave` animation).
427 *
428 *
429 * @param {string} ngAnimateChildren If the value is empty, `true` or `on`,
430 *     then child animations are allowed. If the value is `false`, child animations are not allowed.
431 *
432 * @example
433 * <example module="ngAnimateChildren" name="ngAnimateChildren" deps="angular-animate.js" animations="true">
434     <file name="index.html">
435       <div ng-controller="MainController as main">
436         <label>Show container? <input type="checkbox" ng-model="main.enterElement" /></label>
437         <label>Animate children? <input type="checkbox" ng-model="main.animateChildren" /></label>
438         <hr>
439         <div ng-animate-children="{{main.animateChildren}}">
440           <div ng-if="main.enterElement" class="container">
441             List of items:
442             <div ng-repeat="item in [0, 1, 2, 3]" class="item">Item {{item}}</div>
443           </div>
444         </div>
445       </div>
446     </file>
447     <file name="animations.css">
448
449      .container.ng-enter,
450      .container.ng-leave {
451        transition: all ease 1.5s;
452      }
453
454      .container.ng-enter,
455      .container.ng-leave-active {
456        opacity: 0;
457      }
458
459      .container.ng-leave,
460      .container.ng-enter-active {
461        opacity: 1;
462      }
463
464      .item {
465        background: firebrick;
466        color: #FFF;
467        margin-bottom: 10px;
468      }
469
470      .item.ng-enter,
471      .item.ng-leave {
472        transition: transform 1.5s ease;
473      }
474
475      .item.ng-enter {
476        transform: translateX(50px);
477      }
478
479      .item.ng-enter-active {
480        transform: translateX(0);
481      }
482    </file>
483    <file name="script.js">
484      angular.module('ngAnimateChildren', ['ngAnimate'])
485        .controller('MainController', function MainController() {
486          this.animateChildren = false;

535. For this to work as expected, please use `$animate` to
536 * trigger the animation and then setup a JavaScript animation that injects `$animateCss` to trigger
537 * the CSS animation.
538 *
539 * The example below shows how we can create a folding animation on an element using `ng-if`:
540 *
541 * ```html
542 * <!-- notice the `fold-animation` CSS class -->
543 * <div ng-if="onOff" class="fold-animation">
544 *   This element will go BOOM
545 * </div>
546 * <button ng-click="onOff=true">Fold In</button>
547 * ```
548 *
549 * Now we create the **JavaScript animation** that will trigger the CSS transition:
550 *
551 * ```js
552 * ngModule.animation('.fold-animation', ['$animateCss', function($animateCss) {
553 *   return {
554 *     enter: function(element, doneFn) {
555 *       var height = element[0].offsetHeight;
556 *       return $animateCss(element, {
557 *         from: { height:'0px' },
558 *         to: { height:height + 'px' },
559 *         duration: 1 // one second
560 *       });
561 *     }
562 *   }
563 * }]);
564 * ```
565 *
566 * ## More Advanced Uses
567 *
568 * `$animateCss` is the underlying code that ngAnimate uses to power **CSS-based animations** behind the scenes. Therefore CSS hooks
569 * like `.ng-EVENT`, `.ng-EVENT-active`, `.ng-EVENT-stagger` are all features that can be triggered using `$animateCss` via JavaScript code.
570 *
571 * This also means that just about any combination of adding classes, removing classes, setting styles, dynamically setting a keyframe animation,
572 * applying a hardcoded duration or delay value, changing the animation easing or applying a stagger animation are all options that work with
573 * `$animateCss`. The service itself is smart enough to figure out the combination of options and examine the element styling properties in order
574 * to provide a working animation that will run in CSS.
575 *
576 * The example below showcases a more advanced version of the `.fold-animation` from the example above:
577 *
578 * ```js
579 * ngModule.animation('.fold-animation', ['$animateCss', function($animateCss) {
580 *   return {
581 *     enter: function(element, doneFn) {
582 *       var height = element[0].offsetHeight;
583 *       return $animateCss(element, {
584 *         addClass: 'red large-text pulse-twice',
585 *         easing: 'ease-out',
586 *         from: { height:'0px' },
587 *         to: { height:height + 'px' },
588 *         duration: 1 // one second
589 *       });
590 *     }
591 *   }
592 * }]);
593 * ```
594 *
595 * Since we're adding/removing CSS classes then the CSS transition will also pick those up:
596 *
597 * ```css
598 * /&#42; since a hardcoded duration value of 1 was provided in the JavaScript animation code,
599 * the CSS classes below will be transitioned despite them being defined as regular CSS classes &#42;/
600 * .red { background:red; }
601 * .large-text { font-size:20px; }
602 *
603 * /&#42; we can also use a keyframe animation and $animateCss will make it work alongside the transition &#42;/
604 * .pulse-twice {
605 *   animation: 0.5s pulse linear 2;
606 *   -webkit-animation: 0.5s pulse linear 2;
607 * }
608 *
609 * @keyframes pulse {
610 *   from { transform: scale(0.5); }
611 *   to { transform: scale(1.5); }
612 * }
613 *
614 * @-webkit-keyframes pulse {
615 *   from { -webkit-transform: scale(0.5); }
616 *   to { -webkit-transform: scale(1.5); }
617 * }
618 * ```
619 *
620 * Given this complex combination of CSS classes, styles and options, `$animateCss` will figure everything out and make the animation happen.
621 *
622 * ## How the Options are handled
623 *
624 * `$animateCss` is very versatile and intelligent when it comes to figuring out what configurations to apply to the element to ensure the animation
625 * 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
626 * styles using the `from` and `to` properties.
627 *
628 * ```js
629 * var animator = $animateCss(element, {
630 *   from: { background:'red' },
631 *   to: { background:'blue' }
632 * });
633 * animator.start();
634 * ```
635 *
636 * ```css
637 * .rotating-animation {
638 *   animation:0.5s rotate linear;
639 *   -webkit-animation:0.5s rotate linear;
640 * }
641 *
642 * @keyframes rotate {
643 *   from { transform: rotate(0deg); }
644 *   to { transform: rotate(360deg); }
645 * }
646 *
647 * @-webkit-keyframes rotate {
648 *   from { -webkit-transform: rotate(0deg); }
649 *   to { -webkit-transform: rotate(360deg); }
650 * }
651 * ```
652 *
653 * 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
654 * going to be detected from what the keyframe styles on the CSS class are. In this event, `$animateCss` will automatically create an inline transition
655 * 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
656 * 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
657 * and spread across the transition and keyframe animation.
658 *
659 * ## What is returned
660 *
661 * `$animateCss` works in two stages: a preparation phase and an animation phase. Therefore when `$animateCss` is first called it will NOT actually
662 * 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
663 * added and removed on the element). Once `$animateCss` is called it will return an object with the following properties:
664 *
665 * ```js
666 * var animator = $animateCss(element, { ... });
667 * ```
668 *
669 * Now what do the contents of our `animator` variable look like:
670 *
671 * ```js
672 * {
673 *   // starts the animation
674 *   start: Function,
675 *
676 *   // ends (aborts) the animation
677 *   end: Function
678 * }
679 * ```
680 *
681 * 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.
682 * 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
683 * applied to the element during the preparation phase). Note that all other properties such as duration, delay, transitions and keyframes are just properties
684 * and that changing them will not reconfigure the parameters of the animation.
685 *
686 * ### runner.done() vs runner.then()
687 * 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
688 * runner called `.done(callbackFn)`. The done method works the same as `.finally(callbackFn)`, however, it does **not trigger a digest to occur**.
689 * Therefore, for performance reasons, it's always best to use `runner.done(callback)` instead of `runner.then()`, `runner.catch()` or `runner.finally()`
690 * unless you really need a digest to kick off afterwards.
691 *
692 * 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
693 * (so there is no need to call `runner.done(doneFn)` inside of your JavaScript animation code).
694 * Check the {@link ngAnimate.$animateCss#usage animation code above} to see how this works.
695 *
696 * @param {DOMElement} element the element that will be animated
697 * @param {object} options the animation-related options that will be applied during the animation
698 *
699 * * `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
700 * 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.)
701 * * `structural` - Indicates that the `ng-` prefix will be added to the event class. Setting to `false` or omitting will turn `ng-EVENT` and
702 * `ng-EVENT-active` in `EVENT` and `EVENT-active`. Unused if `event` is omitted.
703 * * `easing` - The CSS easing value that will be applied to the transition or keyframe animation (or both).
704 * * `transitionStyle` - The raw CSS transition style that will be used (e.g. `1s linear all`).
705 * * `keyframeStyle` - The raw CSS keyframe animation style that will be used (e.g. `1s my_animation linear`).
706 * * `from` - The starting CSS styles (a key/value object) that will be applied at the start of the animation.
707 * * `to` - The ending CSS styles (a key/value object) that will be applied across the animation via a CSS transition.
708 * * `addClass` - A space separated list of CSS classes that will be added to the element and spread across the animation.
709 * * `removeClass` - A space separated list of CSS classes that will be removed from the element and spread across the animation.
710 * * `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`
711 * is provided then the animation will be skipped entirely.
712 * * `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
713 * 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
714 * 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
715 * CSS delay value.
716 * * `stagger` - A numeric time value representing the delay between successively animated elements
717 * ({@link ngAnimate#css-staggering-animations Click here to learn how CSS-based staggering works in ngAnimate.})
718 * * `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
719 *   `stagger` option value of `0.1` is used then there will be a stagger delay of `600ms`)
720 * * `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.)
721 * * `cleanupStyles` - Whether or not the provided `from` and `to` styles will be removed once
722 *    the animation is closed. This is useful for when the styles are used purely for the sake of
723 *    the animation and do not have a lasting visual effect on the element (e.g. a collapse and open animation).
724 *    By default this value is set to `false`.
725 *
726 * @return {object} an object with start and end methods and details about the animation.
727 *
728 * * `start` - The method to start the animation. This will return a `Promise` when called.
729 * * `end` - This method will cancel the animation and remove all applied CSS classes and styles.
730 */
731var ONE_SECOND = 1000;
732
733var ELAPSED_TIME_MAX_DECIMAL_PLACES = 3;
734var CLOSING_TIME_BUFFER = 1.5;
735
736var DETECT_CSS_PROPERTIES = {
737  transitionDuration:      TRANSITION_DURATION_PROP,
738  transitionDelay:         TRANSITION_DELAY_PROP,
739  transitionProperty:      TRANSITION_PROP + PROPERTY_KEY,
740  animationDuration:       ANIMATION_DURATION_PROP,
741  animationDelay:          ANIMATION_DELAY_PROP,
742  animationIterationCount: ANIMATION_PROP + ANIMATION_ITERATION_COUNT_KEY
743};
744
745var DETECT_STAGGER_CSS_PROPERTIES = {
746  transitionDuration:      TRANSITION_DURATION_PROP,
747  transitionDelay:         TRANSITION_DELAY_PROP,
748  animationDuration:       ANIMATION_DURATION_PROP,
749  animationDelay:          ANIMATION_DELAY_PROP
750};
751
752function getCssKeyframeDurationStyle(duration) {
753  return [ANIMATION_DURATION_PROP, duration + 's'];
754}
755
756function getCssDelayStyle(delay, isKeyframeAnimation) {
757  var prop = isKeyframeAnimation ? ANIMATION_DELAY_PROP : TRANSITION_DELAY_PROP;
758  return [prop, delay + 's'];
759}
760
761function computeCssStyles($window, element, properties) {
762  var styles = Object.create(null);
763  var detectedStyles = $window.getComputedStyle(element) || {};
764  forEach(properties, function(formalStyleName, actualStyleName) {
765    var val = detectedStyles[formalStyleName];
766    if (val) {
767      var c = val.charAt(0);
768
769      // only numerical-based values have a negative sign or digit as the first value
770      if (c === '-' || c === '+' || c >= 0) {
771        val = parseMaxTime(val);
772      }
773
774      // by setting this to null in the event that the delay is not set or is set directly as 0
775      // then we can still allow for negative values to be used later on and not mistake this
776      // value for being greater than any other negative value.
777      if (val === 0) {
778        val = null;
779      }
780      styles[actualStyleName] = val;
781    }
782  });
783
784  return styles;
785}
786
787function parseMaxTime(str) {
788  var maxValue = 0;
789  var values = str.split(/\s*,\s*/);
790  forEach(values, function(value) {
791    // it's always safe to consider only second values and omit `ms` values since
792    // getComputedStyle will always handle the conversion for us
793    if (value.charAt(value.length - 1) === 's') {
794      value = value.substring(0, value.length - 1);
795    }
796    value = parseFloat(value) || 0;
797    maxValue = maxValue ? Math.max(value, maxValue) : value;
798  });
799  return maxValue;
800}
801
802function truthyTimingValue(val) {
803  return val === 0 || val != null;
804}
805
806function getCssTransitionDurationStyle(duration, applyOnlyDuration) {
807  var style = TRANSITION_PROP;
808  var value = duration + 's';
809  if (applyOnlyDuration) {
810    style += DURATION_KEY;
811  } else {
812    value += ' linear all';
813  }
814  return [style, value];
815}
816

873    function gcsHashFn(node, extraClasses) {
874      var KEY = '$$ngAnimateParentKey';
875      var parentNode = node.parentNode;
876      var parentID = parentNode[KEY] || (parentNode[KEY] = ++parentCounter);
877      return parentID + '-' + node.getAttribute('class') + '-' + extraClasses;
878    }
879
880    function computeCachedCssStyles(node, className, cacheKey, properties) {
881      var timings = gcsLookup.get(cacheKey);
882
883      if (!timings) {
884        timings = computeCssStyles($window, node, properties);
885        if (timings.animationIterationCount === 'infinite') {
886          timings.animationIterationCount = 1;
887        }
888      }
889
890      // we keep putting this in multiple times even though the value and the cacheKey are the same
891      // because we're keeping an internal tally of how many duplicate animations are detected.
892      gcsLookup.put(cacheKey, timings);
893      return timings;
894    }
895
896    function computeCachedCssStaggerStyles(node, className, cacheKey, properties) {
897      var stagger;
898
899      // if we have one or more existing matches of matching elements
900      // containing the same parent + CSS styles (which is how cacheKey works)
901      // then staggering is possible
902      if (gcsLookup.count(cacheKey) > 0) {
903        stagger = gcsStaggerLookup.get(cacheKey);
904
905        if (!stagger) {
906          var staggerClassName = pendClasses(className, '-stagger');
907
908          $$jqLite.addClass(node, staggerClassName);
909
910          stagger = computeCssStyles($window, node, properties);
911
912          // force the conversion of a null value to zero incase not set
913          stagger.animationDuration = Math.max(stagger.animationDuration, 0);
914          stagger.transitionDuration = Math.max(stagger.transitionDuration, 0);
915
916          $$jqLite.removeClass(node, staggerClassName);
917
918          gcsStaggerLookup.put(cacheKey, stagger);
919        }
920      }
921
922      return stagger || {};
923    }
924
925    var rafWaitQueue = [];
926    function waitUntilQuiet(callback) {
927      rafWaitQueue.push(callback);
928      $$rAFScheduler.waitUntilQuiet(function() {
929        gcsLookup.flush();
930        gcsStaggerLookup.flush();
931
932        // DO NOT REMOVE THIS LINE OR REFACTOR OUT THE `pageWidth` variable.
933        // PLEASE EXAMINE THE `$$forceReflow` service to understand why.
934        var pageWidth = $$forceReflow();
935
936        // we use a for loop to ensure that if the queue is changed
937        // during this looping then it will consider new requests
938        for (var i = 0; i < rafWaitQueue.length; i++) {
939          rafWaitQueue[i](pageWidth);
940        }
941        rafWaitQueue.length = 0;
942      });
943    }
944
945    function computeTimings(node, className, cacheKey) {
946      var timings = computeCachedCssStyles(node, className, cacheKey, DETECT_CSS_PROPERTIES);
947      var aD = timings.animationDelay;
948      var tD = timings.transitionDelay;
949      timings.maxDelay = aD && tD
950          ? Math.max(aD, tD)
951          : (aD || tD);
952      timings.maxDuration = Math.max(
953          timings.animationDuration * timings.animationIterationCount,
954          timings.transitionDuration);
955
956      return timings;
957    }
958
959    return function init(element, initialOptions) {
960      // all of the animation functions should create
961      // a copy of the options data, however, if a
962      // parent service has already created a copy then
963      // we should stick to using that
964      var options = initialOptions || {};
965      if (!options.$$prepared) {
966        options = prepareAnimationOptions(copy(options));
967      }
968
969      var restoreStyles = {};
970      var node = getDomNode(element);
971      if (!node
972          || !node.parentNode
973          || !$$animateQueue.enabled()) {
974        return closeAndReturnNoopAnimator();
975      }
976
977      var temporaryStyles = [];
978      var classes = element.attr('class');
979      var styles = packageStyles(options);
980      var animationClosed;
981      var animationPaused;
982      var animationCompleted;
983      var runner;
984      var runnerHost;
985      var maxDelay;
986      var maxDelayTime;
987      var maxDuration;
988      var maxDurationTime;
989      var startTime;
990      var events = [];
991
992      if (options.duration === 0 || (!$sniffer.animations && !$sniffer.transitions)) {
993        return closeAndReturnNoopAnimator();
994      }
995
996      var method = options.event && isArray(options.event)
997            ? options.event.join(' ')
998            : options.event;
999
1000      var isStructural = method && options.structural;
1001      var structuralClassName = '';
1002      var addRemoveClassName = '';
1003
1004      if (isStructural) {
1005        structuralClassName = pendClasses(method, EVENT_CLASS_PREFIX, true);
1006      } else if (method) {
1007        structuralClassName = method;
1008      }
1009
1010      if (options.addClass) {
1011        addRemoveClassName += pendClasses(options.addClass, ADD_CLASS_SUFFIX);
1012      }
1013
1014      if (options.removeClass) {
1015        if (addRemoveClassName.length) {
1016          addRemoveClassName += ' ';
1017        }
1018        addRemoveClassName += pendClasses(options.removeClass, REMOVE_CLASS_SUFFIX);
1019      }
1020
1021      // there may be a situation where a structural animation is combined together
1022      // with CSS classes that need to resolve before the animation is computed.
1023      // However this means that there is no explicit CSS code to block the animation
1024      // from happening (by setting 0s none in the class name). If this is the case
1025      // we need to apply the classes before the first rAF so we know to continue if
1026      // there actually is a detected transition or keyframe animation
1027      if (options.applyClassesEarly && addRemoveClassName.length) {
1028        applyAnimationClasses(element, options);
1029      }
1030
1031      var preparationClasses = [structuralClassName, addRemoveClassName].join(' ').trim();
1032      var fullClassName = classes + ' ' + preparationClasses;
1033      var activeClasses = pendClasses(preparationClasses, ACTIVE_CLASS_SUFFIX);
1034      var hasToStyles = styles.to && Object.keys(styles.to).length > 0;
1035      var containsKeyframeAnimation = (options.keyframeStyle || '').length > 0;
1036
1037      // there is no way we can trigger an animation if no styles and
1038      // no classes are being applied which would then trigger a transition,
1039      // unless there a is raw keyframe value that is applied to the element.
1040      if (!containsKeyframeAnimation
1041           && !hasToStyles
1042           && !preparationClasses) {
1043        return closeAndReturnNoopAnimator();
1044      }
1045
1046      var cacheKey, stagger;
1047      if (options.stagger > 0) {
1048        var staggerVal = parseFloat(options.stagger);
1049        stagger = {
1050          transitionDelay: staggerVal,
1051          animationDelay: staggerVal,
1052          transitionDuration: 0,
1053          animationDuration: 0
1054        };
1055      } else {
1056        cacheKey = gcsHashFn(node, fullClassName);
1057        stagger = computeCachedCssStaggerStyles(node, preparationClasses, cacheKey, DETECT_STAGGER_CSS_PROPERTIES);
1058      }
1059
1060      if (!options.$$skipPreparationClasses) {
1061        $$jqLite.addClass(element, preparationClasses);
1062      }
1063
1064      var applyOnlyDuration;
1065
1066      if (options.transitionStyle) {
1067        var transitionStyle = [TRANSITION_PROP, options.transitionStyle];
1068        applyInlineStyle(node, transitionStyle);
1069        temporaryStyles.push(transitionStyle);
1070      }
1071
1072      if (options.duration >= 0) {
1073        applyOnlyDuration = node.style[TRANSITION_PROP].length > 0;
1074        var durationStyle = getCssTransitionDurationStyle(options.duration, applyOnlyDuration);
1075
1076        // we set the duration so that it will be picked up by getComputedStyle later
1077        applyInlineStyle(node, durationStyle);
1078        temporaryStyles.push(durationStyle);
1079      }
1080
1081      if (options.keyframeStyle) {
1082        var keyframeStyle = [ANIMATION_PROP, options.keyframeStyle];
1083        applyInlineStyle(node, keyframeStyle);
1084        temporaryStyles.push(keyframeStyle);
1085      }
1086
1087      var itemIndex = stagger
1088          ? options.staggerIndex >= 0
1089              ? options.staggerIndex
1090              : gcsLookup.count(cacheKey)
1091          : 0;
1092
1093      var isFirst = itemIndex === 0;
1094
1095      // this is a pre-emptive way of forcing the setup classes to be added and applied INSTANTLY
1096      // without causing any combination of transitions to kick in. By adding a negative delay value
1097      // it forces the setup class' transition to end immediately. We later then remove the negative
1098      // transition delay to allow for the transition to naturally do it's thing. The beauty here is
1099      // that if there is no transition defined then nothing will happen and this will also allow
1100      // other transitions to be stacked on top of each other without any chopping them out.
1101      if (isFirst && !options.skipBlocking) {
1102        blockTransitions(node, SAFE_FAST_FORWARD_DURATION_VALUE);
1103      }
1104
1105      var timings = computeTimings(node, fullClassName, cacheKey);
1106      var relativeDelay = timings.maxDelay;
1107      maxDelay = Math.max(relativeDelay, 0);
1108      maxDuration = timings.maxDuration;
1109
1110      var flags = {};
1111      flags.hasTransitions          = timings.transitionDuration > 0;
1112      flags.hasAnimations           = timings.animationDuration > 0;
1113      flags.hasTransitionAll        = flags.hasTransitions && timings.transitionProperty === 'all';
1114      flags.applyTransitionDuration = hasToStyles && (
1115                                        (flags.hasTransitions && !flags.hasTransitionAll)
1116                                         || (flags.hasAnimations && !flags.hasTransitions));
1117      flags.applyAnimationDuration  = options.duration && flags.hasAnimations;
1118      flags.applyTransitionDelay    = truthyTimingValue(options.delay) && (flags.applyTransitionDuration || flags.hasTransitions);
1119      flags.applyAnimationDelay     = truthyTimingValue(options.delay) && flags.hasAnimations;
1120      flags.recalculateTimingStyles = addRemoveClassName.length > 0;
1121
1122      if (flags.applyTransitionDuration || flags.applyAnimationDuration) {
1123        maxDuration = options.duration ? parseFloat(options.duration) : maxDuration;
1124
1125        if (flags.applyTransitionDuration) {
1126          flags.hasTransitions = true;
1127          timings.transitionDuration = maxDuration;
1128          applyOnlyDuration = node.style[TRANSITION_PROP + PROPERTY_KEY].length > 0;
1129          temporaryStyles.push(getCssTransitionDurationStyle(maxDuration, applyOnlyDuration));
1130        }
1131
1132        if (flags.applyAnimationDuration) {
1133          flags.hasAnimations = true;
1134          timings.animationDuration = maxDuration;
1135          temporaryStyles.push(getCssKeyframeDurationStyle(maxDuration));
1136        }
1137      }
1138
1139      if (maxDuration === 0 && !flags.recalculateTimingStyles) {
1140        return closeAndReturnNoopAnimator();
1141      }
1142
1143      if (options.delay != null) {
1144        var delayStyle;
1145        if (typeof options.delay !== 'boolean') {
1146          delayStyle = parseFloat(options.delay);
1147          // number in options.delay means we have to recalculate the delay for the closing timeout
1148          maxDelay = Math.max(delayStyle, 0);
1149        }
1150
1151        if (flags.applyTransitionDelay) {
1152          temporaryStyles.push(getCssDelayStyle(delayStyle));
1153        }
1154
1155        if (flags.applyAnimationDelay) {
1156          temporaryStyles.push(getCssDelayStyle(delayStyle, true));
1157        }
1158      }
1159
1160      // we need to recalculate the delay value since we used a pre-emptive negative
1161      // delay value and the delay value is required for the final event checking. This
1162      // property will ensure that this will happen after the RAF phase has passed.
1163      if (options.duration == null && timings.transitionDuration > 0) {
1164        flags.recalculateTimingStyles = flags.recalculateTimingStyles || isFirst;
1165      }
1166
1167      maxDelayTime = maxDelay * ONE_SECOND;
1168      maxDurationTime = maxDuration * ONE_SECOND;
1169      if (!options.skipBlocking) {
1170        flags.blockTransition = timings.transitionDuration > 0;
1171        flags.blockKeyframeAnimation = timings.animationDuration > 0 &&
1172                                       stagger.animationDelay > 0 &&
1173                                       stagger.animationDuration === 0;
1174      }
1175
1176      if (options.from) {
1177        if (options.cleanupStyles) {
1178          registerRestorableStyles(restoreStyles, node, Object.keys(options.from));
1179        }
1180        applyAnimationFromStyles(element, options);
1181      }
1182
1183      if (flags.blockTransition || flags.blockKeyframeAnimation) {
1184        applyBlocking(maxDuration);
1185      } else if (!options.skipBlocking) {
1186        blockTransitions(node, false);
1187      }
1188
1189      // TODO(matsko): for 1.5 change this code to have an animator object for better debugging
1190      return {
1191        $$willAnimate: true,
1192        end: endFn,
1193        start: function() {
1194          if (animationClosed) return;
1195
1196          runnerHost = {
1197            end: endFn,
1198            cancel: cancelFn,
1199            resume: null, //this will be set during the start() phase
1200            pause: null
1201          };
1202
1203          runner = new $$AnimateRunner(runnerHost);
1204
1205          waitUntilQuiet(start);
1206
1207          // we don't have access to pause/resume the animation
1208          // since it hasn't run yet. AnimateRunner will therefore
1209          // set noop functions for resume and pause and they will
1210          // later be overridden once the animation is triggered
1211          return runner;
1212        }
1213      };
1214
1215      function endFn() {
1216        close();
1217      }
1218
1219      function cancelFn() {
1220        close(true);
1221      }
1222
1223      function close(rejected) {
1224        // if the promise has been called already then we shouldn't close
1225        // the animation again
1226        if (animationClosed || (animationCompleted && animationPaused)) return;
1227        animationClosed = true;
1228        animationPaused = false;
1229
1230        if (!options.$$skipPreparationClasses) {
1231          $$jqLite.removeClass(element, preparationClasses);
1232        }
1233        $$jqLite.removeClass(element, activeClasses);
1234
1235        blockKeyframeAnimations(node, false);
1236        blockTransitions(node, false);
1237
1238        forEach(temporaryStyles, function(entry) {
1239          // There is only one way to remove inline style properties entirely from elements.
1240          // By using `removeProperty` this works, but we need to convert camel-cased CSS
1241          // styles down to hyphenated values.
1242          node.style[entry[0]] = '';
1243        });
1244
1245        applyAnimationClasses(element, options);
1246        applyAnimationStyles(element, options);
1247
1248        if (Object.keys(restoreStyles).length) {
1249          forEach(restoreStyles, function(value, prop) {
1250            if (value) {
1251              node.style.setProperty(prop, value);
1252            } else {
1253              node.style.removeProperty(prop);
1254            }
1255          });
1256        }
1257
1258        // the reason why we have this option is to allow a synchronous closing callback
1259        // that is fired as SOON as the animation ends (when the CSS is removed) or if
1260        // the animation never takes off at all. A good example is a leave animation since
1261        // the element must be removed just after the animation is over or else the element
1262        // will appear on screen for one animation frame causing an overbearing flicker.
1263        if (options.onDone) {
1264          options.onDone();
1265        }
1266
1267        if (events && events.length) {
1268          // Remove the transitionend / animationend listener(s)
1269          element.off(events.join(' '), onAnimationProgress);
1270        }
1271
1272        //Cancel the fallback closing timeout and remove the timer data
1273        var animationTimerData = element.data(ANIMATE_TIMER_KEY);
1274        if (animationTimerData) {
1275          $timeout.cancel(animationTimerData[0].timer);
1276          element.removeData(ANIMATE_TIMER_KEY);
1277        }
1278
1279        // if the preparation function fails then the promise is not setup
1280        if (runner) {
1281          runner.complete(!rejected);
1282        }
1283      }
1284
1285      function applyBlocking(duration) {
1286        if (flags.blockTransition) {
1287          blockTransitions(node, duration);
1288        }
1289
1290        if (flags.blockKeyframeAnimation) {
1291          blockKeyframeAnimations(node, !!duration);
1292        }
1293      }
1294
1295      function closeAndReturnNoopAnimator() {
1296        runner = new $$AnimateRunner({
1297          end: endFn,
1298          cancel: cancelFn
1299        });
1300
1301        // should flush the cache animation
1302        waitUntilQuiet(noop);
1303        close();
1304
1305        return {
1306          $$willAnimate: false,
1307          start: function() {
1308            return runner;
1309          },
1310          end: endFn
1311        };
1312      }
1313
1314      function onAnimationProgress(event) {
1315        event.stopPropagation();
1316        var ev = event.originalEvent || event;
1317
1318        // we now always use `Date.now()` due to the recent changes with
1319        // event.timeStamp in Firefox, Webkit and Chrome (see #13494 for more info)
1320        var timeStamp = ev.$manualTimeStamp || Date.now();
1321
1322        /* Firefox (or possibly just Gecko) likes to not round values up
1323         * when a ms measurement is used for the animation */
1324        var elapsedTime = parseFloat(ev.elapsedTime.toFixed(ELAPSED_TIME_MAX_DECIMAL_PLACES));
1325
1326        /* $manualTimeStamp is a mocked timeStamp value which is set
1327         * within browserTrigger(). This is only here so that tests can
1328         * mock animations properly. Real events fallback to event.timeStamp,
1329         * or, if they don't, then a timeStamp is automatically created for them.
1330         * We're checking to see if the timeStamp surpasses the expected delay,
1331         * but we're using elapsedTime instead of the timeStamp on the 2nd
1332         * pre-condition since animationPauseds sometimes close off early */
1333        if (Math.max(timeStamp - startTime, 0) >= maxDelayTime && elapsedTime >= maxDuration) {
1334          // we set this flag to ensure that if the transition is paused then, when resumed,
1335          // the animation will automatically close itself since transitions cannot be paused.
1336          animationCompleted = true;
1337          close();
1338        }
1339      }
1340
1341      function start() {
1342        if (animationClosed) return;
1343        if (!node.parentNode) {
1344          close();
1345          return;
1346        }
1347
1348        // even though we only pause keyframe animations here the pause flag
1349        // will still happen when transitions are used. Only the transition will
1350        // not be paused since that is not possible. If the animation ends when
1351        // paused then it will not complete until unpaused or cancelled.
1352        var playPause = function(playAnimation) {
1353          if (!animationCompleted) {
1354            animationPaused = !playAnimation;
1355            if (timings.animationDuration) {
1356              var value = blockKeyframeAnimations(node, animationPaused);
1357              if (animationPaused) {
1358                temporaryStyles.push(value);
1359              } else {
1360                removeFromArray(temporaryStyles, value);
1361              }
1362            }
1363          } else if (animationPaused && playAnimation) {
1364            animationPaused = false;
1365            close();
1366          }
1367        };
1368
1369        // checking the stagger duration prevents an accidentally cascade of the CSS delay style
1370        // being inherited from the parent. If the transition duration is zero then we can safely
1371        // rely that the delay value is an intentional stagger delay style.
1372        var maxStagger = itemIndex > 0
1373                         && ((timings.transitionDuration && stagger.transitionDuration === 0) ||
1374                            (timings.animationDuration && stagger.animationDuration === 0))
1375                         && Math.max(stagger.animationDelay, stagger.transitionDelay);
1376        if (maxStagger) {
1377          $timeout(triggerAnimationStart,
1378                   Math.floor(maxStagger * itemIndex * ONE_SECOND),
1379                   false);
1380        } else {
1381          triggerAnimationStart();
1382        }
1383
1384        // this will decorate the existing promise runner with pause/resume methods
1385        runnerHost.resume = function() {
1386          playPause(true);
1387        };
1388
1389        runnerHost.pause = function() {
1390          playPause(false);
1391        };
1392
1393        function triggerAnimationStart() {
1394          // just incase a stagger animation kicks in when the animation
1395          // itself was cancelled entirely
1396          if (animationClosed) return;
1397
1398          applyBlocking(false);
1399
1400          forEach(temporaryStyles, function(entry) {
1401            var key = entry[0];
1402            var value = entry[1];
1403            node.style[key] = value;
1404          });
1405
1406          applyAnimationClasses(element, options);
1407          $$jqLite.addClass(element, activeClasses);
1408
1409          if (flags.recalculateTimingStyles) {
1410            fullClassName = node.getAttribute('class') + ' ' + preparationClasses;
1411            cacheKey = gcsHashFn(node, fullClassName);
1412
1413            timings = computeTimings(node, fullClassName, cacheKey

1413);
1414            relativeDelay = timings.maxDelay;
1415            maxDelay = Math.max(relativeDelay, 0);
1416            maxDuration = timings.maxDuration;
1417
1418            if (maxDuration === 0) {
1419              close();
1420              return;
1421            }
1422
1423            flags.hasTransitions = timings.transitionDuration > 0;
1424            flags.hasAnimations = timings.animationDuration > 0;
1425          }
1426
1427          if (flags.applyAnimationDelay) {
1428            relativeDelay = typeof options.delay !== 'boolean' && truthyTimingValue(options.delay)
1429                  ? parseFloat(options.delay)
1430                  : relativeDelay;
1431
1432            maxDelay = Math.max(relativeDelay, 0);
1433            timings.animationDelay = relativeDelay;
1434            delayStyle = getCssDelayStyle(relativeDelay, true);
1435            temporaryStyles.push(delayStyle);
1436            node.style[delayStyle[0]] = delayStyle[1];
1437          }
1438
1439          maxDelayTime = maxDelay * ONE_SECOND;
1440          maxDurationTime = maxDuration * ONE_SECOND;
1441
1442          if (options.easing) {
1443            var easeProp, easeVal = options.easing;
1444            if (flags.hasTransitions) {
1445              easeProp = TRANSITION_PROP + TIMING_KEY;
1446              temporaryStyles.push([easeProp, easeVal]);
1447              node.style[easeProp] = easeVal;
1448            }
1449            if (flags.hasAnimations) {
1450              easeProp = ANIMATION_PROP + TIMING_KEY;
1451              temporaryStyles.push([easeProp, easeVal]);
1452              node.style[easeProp] = easeVal;
1453            }
1454          }
1455
1456          if (timings.transitionDuration) {
1457            events.push(TRANSITIONEND_EVENT);
1458          }
1459
1460          if (timings.animationDuration) {
1461            events.push(ANIMATIONEND_EVENT);
1462          }
1463
1464          startTime = Date.now();
1465          var timerTime = maxDelayTime + CLOSING_TIME_BUFFER * maxDurationTime;
1466          var endTime = startTime + timerTime;
1467
1468          var animationsData = element.data(ANIMATE_TIMER_KEY) || [];
1469          var setupFallbackTimer = true;
1470          if (animationsData.length) {
1471            var currentTimerData = animationsData[0];
1472            setupFallbackTimer = endTime > currentTimerData.expectedEndTime;
1473            if (setupFallbackTimer) {
1474              $timeout.cancel(currentTimerData.timer);
1475            } else {
1476              animationsData.push(close);
1477            }
1478          }
1479
1480          if (setupFallbackTimer) {
1481            var timer = $timeout(onAnimationExpired, timerTime, false);
1482            animationsData[0] = {
1483              timer: timer,
1484              expectedEndTime: endTime
1485            };
1486            animationsData.push(close);
1487            element.data(ANIMATE_TIMER_KEY, animationsData);
1488          }
1489
1490          if (events.length) {
1491            element.on(events.join(' '), onAnimationProgress);
1492          }
1493
1494          if (options.to) {
1495            if (options.cleanupStyles) {
1496              registerRestorableStyles(restoreStyles, node, Object.keys(options.to));
1497            }
1498            applyAnimationToStyles(element, options);
1499          }
1500        }
1501
1502        function onAnimationExpired() {
1503          var animationsData = element.data(ANIMATE_TIMER_KEY);
1504
1505          // this will be false in the event that the element was
1506          // removed from the DOM (via a leave animation or something
1507          // similar)
1508          if (animationsData) {
1509            for (var i = 1; i < animationsData.length; i++) {
1510              animationsData[i]();
1511            }
1512            element.removeData(ANIMATE_TIMER_KEY);
1513          }
1514        }
1515      }
1516    };
1517  }];
1518}];
1519
1520var $$AnimateCssDriverProvider = ['$$animationProvider', /** @this */ function($$animationProvider) {
1521  $$animationProvider.drivers.push('$$animateCssDriver');
1522
1523  var NG_ANIMATE_SHIM_CLASS_NAME = 'ng-animate-shim';
1524  var NG_ANIMATE_ANCHOR_CLASS_NAME = 'ng-anchor';
1525
1526  var NG_OUT_ANCHOR_CLASS_NAME = 'ng-anchor-out';
1527  var NG_IN_ANCHOR_CLASS_NAME = 'ng-anchor-in';
1528
1529  function isDocumentFragment(node) {
1530    return node.parentNode && node.parentNode.nodeType === 11;
1531  }
1532
1533  this.$get = ['$animateCss', '$rootScope', '$$AnimateRunner', '$rootElement', '$sniffer', '$$jqLite', '$document',
1534       function($animateCss,   $rootScope,   $$AnimateRunner,   $rootElement,   $sniffer,   $$jqLite,   $document) {
1535
1536    // only browsers that support these properties can render animations
1537    if (!$sniffer.animations && !$sniffer.transitions) return noop;
1538
1539    var bodyNode = $document[0].body;
1540    var rootNode = getDomNode($rootElement);
1541
1542    var rootBodyElement = jqLite(
1543      // this is to avoid using something that exists outside of the body
1544      // we also special case the doc fragment case because our unit test code
1545      // appends the $rootElement to the body after the app has been bootstrapped
1546      isDocumentFragment(rootNode) || bodyNode.contains(rootNode) ? rootNode : bodyNode
1547    );
1548
1549    return function initDriverFn(animationDetails) {
1550      return animationDetails.from && animationDetails.to
1551          ? prepareFromToAnchorAnimation(animationDetails.from,
1552                                         animationDetails.to,
1553                                         animationDetails.classes,
1554                                         animationDetails.anchors)
1555          : prepareRegularAnimation(animationDetails);
1556    };
1557
1558    function filterCssClasses(classes) {
1559      //remove all the `ng-` stuff
1560      return classes.replace(/\bng-\S+\b/g, '');
1561    }
1562
1563    function getUniqueValues(a, b) {
1564      if (isString(a)) a = a.split(' ');
1565      if (isString(b)) b = b.split(' ');
1566      return a.filter(function(val) {
1567        return b.indexOf(val) === -1;
1568      }).join(' ');
1569    }
1570
1571    function prepareAnchoredAnimation(classes, outAnchor, inAnchor) {
1572      var clone = jqLite(getDomNode(outAnchor).cloneNode(true));
1573      var startingClasses = filterCssClasses(getClassVal(clone));
1574
1575      outAnchor.addClass(NG_ANIMATE_SHIM_CLASS_NAME);
1576      inAnchor.addClass(NG_ANIMATE_SHIM_CLASS_NAME);
1577
1578      clone.addClass(NG_ANIMATE_ANCHOR_CLASS_NAME);
1579
1580      rootBodyElement.append(clone);
1581
1582      var animatorIn, animatorOut = prepareOutAnimation();
1583
1584      // the user may not end up using the `out` animation and
1585      // only making use of the `in` animation or vice-versa.
1586      // In either case we should allow this and not assume the
1587      // animation is over unless both animations are not used.
1588      if (!animatorOut) {
1589        animatorIn = prepareInAnimation();
1590        if (!animatorIn) {
1591          return end();
1592        }
1593      }
1594
1595      var startingAnimator = animatorOut || animatorIn;
1596
1597      return {
1598        start: function() {
1599          var runner;
1600
1601          var currentAnimation = startingAnimator.start();
1602          currentAnimation.done(function() {
1603            currentAnimation = null;
1604            if (!animatorIn) {
1605              animatorIn = prepareInAnimation();
1606              if (animatorIn) {
1607                currentAnimation = animatorIn.start();
1608                currentAnimation.done(function() {
1609                  currentAnimation = null;
1610                  end();
1611                  runner.complete();
1612                });
1613                return currentAnimation;
1614              }
1615            }
1616            // in the event that there is no `in` animation
1617            end();
1618            runner.complete();
1619          });
1620
1621          runner = new $$AnimateRunner({
1622            end: endFn,
1623            cancel: endFn
1624          });
1625
1626          return runner;
1627
1628          function endFn() {
1629            if (currentAnimation) {
1630              currentAnimation.end();
1631            }
1632          }
1633        }
1634      };
1635
1636      function calculateAnchorStyles(anchor) {
1637        var styles = {};
1638
1639        var coords = getDomNode(anchor).getBoundingClientRect();
1640
1641        // we iterate directly since safari messes up and doesn't return
1642        // all the keys for the coords object when iterated
1643        forEach(['width','height','top','left'], function(key) {
1644          var value = coords[key];
1645          switch (key) {
1646            case 'top':
1647              value += bodyNode.scrollTop;
1648              break;
1649            case 'left':
1650              value += bodyNode.scrollLeft;
1651              break;
1652          }
1653          styles[key] = Math.floor(value) + 'px';
1654        });
1655        return styles;
1656      }
1657
1658      function prepareOutAnimation() {
1659        var animator = $animateCss(clone, {
1660          addClass: NG_OUT_ANCHOR_CLASS_NAME,
1661          delay: true,
1662          from: calculateAnchorStyles(outAnchor)
1663        });
1664
1665        // read the comment within `prepareRegularAnimation` to understand
1666        // why this check is necessary
1667        return animator.$$willAnimate ? animator : null;
1668      }
1669
1670      function getClassVal(element) {
1671        return element.attr('class') || '';
1672      }
1673
1674      function prepareInAnimation() {
1675        var endingClasses = filterCssClasses(getClassVal(inAnchor));
1676        var toAdd = getUniqueValues(endingClasses, startingClasses);
1677        var toRemove = getUniqueValues(startingClasses, endingClasses);
1678
1679        var animator = $animateCss(clone, {
1680          to: calculateAnchorStyles(inAnchor),
1681          addClass: NG_IN_ANCHOR_CLASS_NAME + ' ' + toAdd,
1682          removeClass: NG_OUT_ANCHOR_CLASS_NAME + ' ' + toRemove,
1683          delay: true
1684        });
1685
1686        // read the comment within `prepareRegularAnimation` to understand
1687        // why this check is necessary
1688        return animator.$$willAnimate ? animator : null;
1689      }
1690
1691      function end() {
1692        clone.remove();
1693        outAnchor.removeClass(NG_ANIMATE_SHIM_CLASS_NAME);
1694        inAnchor.removeClass(NG_ANIMATE_SHIM_CLASS_NAME);
1695      }
1696    }
1697
1698    function prepareFromToAnchorAnimation(from, to, classes, anchors) {
1699      var fromAnimation = prepareRegularAnimation(from, noop);
1700      var toAnimation = prepareRegularAnimation(to, noop);
1701
1702      var anchorAnimations = [];
1703      forEach(anchors, function(anchor) {
1704        var outElement = anchor['out'];
1705        var inElement = anchor['in'];
1706        var animator = prepareAnchoredAnimation(classes, outElement, inElement);
1707        if (animator) {
1708          anchorAnimations.push(animator);
1709        }
1710      });
1711
1712      // no point in doing anything when there are no elements to animate
1713      if (!fromAnimation && !toAnimation && anchorAnimations.length === 0) return;
1714
1715      return {
1716        start: function() {
1717          var animationRunners = [];
1718
1719          if (fromAnimation) {
1720            animationRunners.push(fromAnimation.start());
1721          }
1722
1723          if (toAnimation) {
1724            animationRunners.push(toAnimation.start());
1725          }
1726
1727          forEach(anchorAnimations, function(animation) {
1728            animationRunners.push(animation.start());
1729          });
1730
1731          var runner = new $$AnimateRunner({
1732            end: endFn,
1733            cancel: endFn // CSS-driven animations cannot be cancelled, only ended
1734          });
1735
1736          $$AnimateRunner.all(animationRunners, function(status) {
1737            runner.complete(status);
1738          });
1739
1740          return runner;
1741
1742          function endFn() {
1743            forEach(animationRunners, function(runner) {
1744              runner.end();
1745            });
1746          }
1747        }
1748      };
1749    }
1750
1751    function prepareRegularAnimation(animationDetails) {
1752      var element = animationDetails.element;
1753      var options = animationDetails.options || {};
1754
1755      if (animationDetails.structural) {
1756        options.event = animationDetails.event;
1757        options.structural = true;
1758        options.applyClassesEarly = true;
1759
1760        // we special case the leave animation since we want to ensure that
1761        // the element is removed as soon as the animation is over. Otherwise
1762        // a flicker might appear or the element may not be removed at all
1763        if (animationDetails.event === 'leave') {
1764          options.onDone = options.domOperation;
1765        }
1766      }
1767
1768      // We assign the preparationClasses as the actual animation event since
1769      // the internals of $animateCss will just suffix the event token values
1770      // with `-active` to trigger the animation.
1771      if (options.preparationClasses) {
1772        options.event = concatWithSpace(options.event, options.preparationClasses);
1773      }
1774
1775      var animator = $animateCss(element, options);
1776
1777      // the driver lookup code inside of $$animation attempts to spawn a
1778      // driver one by one until a driver returns a.$$willAnimate animator object.
1779      // $animateCss will always return an object, however, it will pass in
1780      // a flag as a hint as to whether an animation was detected or not
1781      return animator.$$willAnimate ? animator : null;
1782    }
1783  }];
1784}];
1785
1786// TODO(matsko): use caching here to speed things up for detection
1787// TODO(matsko): add documentation
1788//  by the time...
1789
1790var $$AnimateJsProvider = ['$animateProvider', /** @this */ function($animateProvider) {
1791  this.$get = ['$injector', '$$AnimateRunner', '$$jqLite',
1792       function($injector,   $$AnimateRunner,   $$jqLite) {
1793
1794    var applyAnimationClasses = applyAnimationClassesFactory($$jqLite);
1795         // $animateJs(element, 'enter');
1796    return function(element, event, classes, options) {
1797      var animationClosed = false;
1798
1799      // the `classes` argument is optional and if it is not used
1800      // then the classes will be resolved from the element's className
1801      // property as well as options.addClass/options.removeClass.
1802      if (arguments.length === 3 && isObject(classes)) {
1803        options = classes;
1804        classes = null;
1805      }
1806
1807      options = prepareAnimationOptions(options);
1808      if (!classes) {
1809        classes = element.attr('class') || '';
1810        if (options.addClass) {
1811          classes += ' ' + options.addClass;
1812        }
1813        if (options.removeClass) {
1814          classes += ' ' + options.removeClass;
1815        }
1816      }
1817
1818      var classesToAdd = options.addClass;
1819      var classesToRemove = options.removeClass;
1820
1821      // the lookupAnimations function returns a series of animation objects that are
1822      // matched up with one or more of the CSS classes. These animation objects are
1823      // defined via the module.animation factory function. If nothing is detected then
1824      // we don't return anything which then makes $animation query the next driver.
1825      var animations = lookupAnimations(classes);
1826      var before, after;
1827      if (animations.length) {
1828        var afterFn, beforeFn;
1829        if (event === 'leave') {
1830          beforeFn = 'leave';
1831          afterFn = 'afterLeave'; // TODO(matsko): get rid of this
1832        } else {
1833          beforeFn = 'before' + event.charAt(0).toUpperCase() + event.substr(1);
1834          afterFn = event;
1835        }
1836
1837        if (event !== 'enter' && event !== 'move') {
1838          before = packageAnimations(element, event, options, animations, beforeFn);
1839        }
1840        after  = packageAnimations(element, event, options, animations, afterFn);
1841      }
1842
1843      // no matching animations
1844      if (!before && !after) return;
1845
1846      function applyOptions() {
1847        options.domOperation();
1848        applyAnimationClasses(element, options);
1849      }
1850
1851      function close() {
1852        animationClosed = true;
1853        applyOptions();
1854        applyAnimationStyles(element, options);
1855      }
1856
1857      var runner;
1858
1859      return {
1860        $$willAnimate: true,
1861        end: function() {
1862          if (runner) {
1863            runner.end();
1864          } else {
1865            close();
1866            runner = new $$AnimateRunner();
1867            runner.complete(true);
1868          }
1869          return runner;
1870        },
1871        start: function() {
1872          if (runner) {
1873            return runner;
1874          }
1875
1876          runner = new $$AnimateRunner();
1877          var closeActiveAnimations;
1878          var chain = [];
1879
1880          if (before) {
1881            chain.push(function(fn) {
1882              closeActiveAnimations = before(fn);
1883            });
1884          }
1885
1886          if (chain.length) {
1887            chain.push(function(fn) {
1888              applyOptions();
1889              fn(true);
1890            });
1891          } else {
1892            applyOptions();
1893          }
1894
1895          if (after) {
1896            chain.push(function(fn) {
1897              closeActiveAnimations = after(fn);
1898            });
1899          }
1900
1901          runner.setHost({
1902            end: function() {
1903              endAnimations();
1904            },
1905            cancel: function() {
1906              endAnimations(true);
1907            }
1908          });
1909
1910          $$AnimateRunner.chain(chain, onComplete);
1911          return runner;
1912
1913          function onComplete(success) {
1914            close(success);
1915            runner.complete(success);
1916          }
1917
1918          function endAnimations(cancelled) {
1919            if (!animationClosed) {
1920              (closeActiveAnimations || noop)(cancelled);
1921              onComplete(cancelled);
1922            }
1923          }
1924        }
1925      };
1926
1927      function executeAnimationFn(fn, element, event, options, onDone) {
1928        var args;
1929        switch (event) {
1930          case 'animate':
1931            args = [element, options.from, options.to, onDone];
1932            break;
1933
1934          case 'setClass':
1935            args = [element, classesToAdd, classesToRemove, onDone];
1936            break;
1937
1938          case 'addClass':
1939            args = [element, classesToAdd, onDone];
1940            break;
1941
1942          case 'removeClass':
1943            args = [element, classesToRemove, onDone];
1944            break;
1945
1946          default:
1947            args = [element, onDone];
1948            break;
1949        }
1950
1951        args.push(options);
1952
1953        var value = fn.apply(fn, args);
1954        if (value) {
1955          if (isFunction(value.start)) {
1956            value = value.start();
1957          }
1958
1959          if (value instanceof $$AnimateRunner) {
1960            value.done(onDone);
1961          } else if (isFunction(value)) {
1962            // optional onEnd / onCancel callback
1963            return value;
1964          }
1965        }
1966
1967        return noop;
1968      }
1969
1970      function groupEventedAnimations(element, event, options, animations, fnName) {
1971        var operations = [];
1972        forEach(animations, function(ani) {
1973          var animation = ani[fnName];
1974          if (!animation) return;
1975
1976          // note that all of these animations will run in parallel
1977          operations.push(function() {
1978            var runner;
1979            var endProgressCb;
1980
1981            var resolved = false;
1982            var onAnimationComplete = function(rejected) {
1983              if (!resolved) {
1984                resolved = true;
1985                (endProgressCb || noop)(rejected);
1986                runner.complete(!rejected);
1987              }
1988            };
1989
1990            runner = new $$AnimateRunner({
1991              end: function() {
1992                onAnimationComplete();
1993              },
1994              cancel: function() {
1995                onAnimationComplete(true);
1996              }
1997            });
1998
1999            endProgressCb = executeAnimationFn(animation, element, event, options, function(result) {
2000              var cancelled = result === false;
2001              onAnimationComplete(cancelled);
2002            });
2003
2004            return runner;
2005          });
2006        });
2007
2008        return operations;
2009      }
2010
2011      function packageAnimations(element, event, options, animations, fnName) {
2012        var operations = groupEventedAnimations(element, event, options, animations, fnName);
2013        if (operations.length === 0) {
2014          var a, b;
2015          if (fnName === 'beforeSetClass') {
2016            a = groupEventedAnimations(element, 'removeClass', options, animations, 'beforeRemoveClass');
2017            b = groupEventedAnimations(element, 'addClass', options, animations, 'beforeAddClass');
2018          } else if (fnName === 'setClass') {
2019            a = groupEventedAnimations(element, 'removeClass', options, animations, 'removeClass');
2020            b = groupEventedAnimations(element, 'addClass', options, animations, 'addClass');
2021          }
2022
2023          if (a) {
2024            operations = operations.concat(a);
2025          }
2026          if (b) {
2027            operations = operations.concat(b);
2028          }
2029        }
2030
2031        if (operations.length === 0) return;
2032
2033        // TODO(matsko): add documentation
2034        return function startAnimation(callback) {
2035          var runners = [];
2036          if (operations.length) {
2037            forEach(operations, function(animateFn) {
2038              runners.push(animateFn());
2039            });
2040          }
2041
2042          if (runners.length) {
2043            $$AnimateRunner.all(runners, callback);
2044          }  else {
2045            callback();
2046          }
2047
2048          return function endFn(reject) {
2049            forEach(runners, function(runner) {
2050              if (reject) {
2051                runner.cancel();
2052              } else {
2053                runner.end();
2054              }
2055            });
2056          };
2057        };
2058      }
2059    };
2060
2061    function lookupAnimations(classes) {
2062      classes = isArray(classes) ? classes : classes.split(' ');
2063      var matches = [], flagMap = {};
2064      for (var i = 0; i < classes.length; i++) {
2065        var klass = classes[i],
2066            animationFactory = $animateProvider.$$registeredAnimations[klass];
2067        if (animationFactory && !flagMap[klass]) {
2068          matches.push($injector.get(animationFactory));
2069          flagMap[klass] = true;
2070        }
2071      }
2072      return matches;
2073    }
2074  }];
2075}];
2076
2077var $$AnimateJsDriverProvider = ['$$animationProvider', /** @this */ function($$animationProvider) {
2078  $$animationProvider.drivers.push('$$animateJsDriver');
2079  this.$get = ['$$animateJs', '$$AnimateRunner', function($$animateJs, $$AnimateRunner) {
2080    return function initDriverFn(animationDetails) {
2081      if (animationDetails.from && animationDetails.to) {
2082        var fromAnimation = prepareAnimation(animationDetails.from);
2083        var toAnimation = prepareAnimation(animationDetails.to);
2084        if (!fromAnimation && !toAnimation) return;
2085
2086        return {
2087          start: function() {
2088            var animationRunners = [];
2089
2090            if (fromAnimation) {
2091              animationRunners.push(fromAnimation.start());
2092            }
2093
2094            if (toAnimation) {
2095              animationRunners.push(toAnimation.start());
2096            }
2097
2098            $$AnimateRunner.all(animationRunners, done);
2099
2100            var runner = new $$AnimateRunner({
2101              end: endFnFactory(),
2102              cancel: endFnFactory()
2103            });
2104
2105            return runner;
2106
2107            function endFnFactory() {
2108              return function() {
2109                forEach(animationRunners, function(runner) {
2110                  // at this point we cannot cancel animations for groups just yet. 1.5+
2111                  runner.end();
2112                });
2113              };
2114            }
2115
2116            function done(status) {
2117              runner.complete(status);
2118            }
2119          }
2120        };
2121      } else {
2122        return prepareAnimation(animationDetails);
2123      }
2124    };
2125
2126    function prepareAnimation(animationDetails) {
2127      // TODO(matsko): make sure to check for grouped animations and delegate down to normal animations
2128      var element = animationDetails.element;
2129      var event = animationDetails.event;
2130      var options = animationDetails.options;
2131      var classes = animationDetails.classes;
2132      return $$animateJs(element, event, classes, options);
2133    }
2134  }];
2135}];
2136
2137var NG_ANIMATE_ATTR_NAME = 'data-ng-animate';
2138var NG_ANIMATE_PIN_DATA = '$ngAnimatePin';
2139var $$AnimateQueueProvider = ['$animateProvider', /** @this */ function($animateProvider) {
2140  var PRE_DIGEST_STATE = 1;
2141  var RUNNING_STATE = 2;
2142  var ONE_SPACE = ' ';
2143
2144  var rules = this.rules = {
2145    skip: [],
2146    cancel: [],
2147    join: []
2148  };
2149
2150  function 

2187    return !newAnimation.structural && hasAnimationClasses(newAnimation);
2188  });
2189
2190  rules.skip.push(function(newAnimation, currentAnimation) {
2191    // there is no need to animate anything if no classes are being added and
2192    // there is no structural animation that will be triggered
2193    return !newAnimation.structural && !hasAnimationClasses(newAnimation);
2194  });
2195
2196  rules.skip.push(function(newAnimation, currentAnimation) {
2197    // why should we trigger a new structural animation if the element will
2198    // be removed from the DOM anyway?
2199    return currentAnimation.event === 'leave' && newAnimation.structural;
2200  });
2201
2202  rules.skip.push(function(newAnimation, currentAnimation) {
2203    // if there is an ongoing current animation then don't even bother running the class-based animation
2204    return currentAnimation.structural && currentAnimation.state === RUNNING_STATE && !newAnimation.structural;
2205  });
2206
2207  rules.cancel.push(function(newAnimation, currentAnimation) {
2208    // there can never be two structural animations running at the same time
2209    return currentAnimation.structural && newAnimation.structural;
2210  });
2211
2212  rules.cancel.push(function(newAnimation, currentAnimation) {
2213    // if the previous animation is already running, but the new animation will
2214    // be triggered, but the new animation is structural
2215    return currentAnimation.state === RUNNING_STATE && newAnimation.structural;
2216  });
2217
2218  rules.cancel.push(function(newAnimation, currentAnimation) {
2219    // cancel the animation if classes added / removed in both animation cancel each other out,
2220    // but only if the current animation isn't structural
2221
2222    if (currentAnimation.structural) return false;
2223
2224    var nA = newAnimation.addClass;
2225    var nR = newAnimation.removeClass;
2226    var cA = currentAnimation.addClass;
2227    var cR = currentAnimation.removeClass;
2228
2229    // early detection to save the global CPU shortage :)
2230    if ((isUndefined(nA) && isUndefined(nR)) || (isUndefined(cA) && isUndefined(cR))) {
2231      return false;
2232    }
2233
2234    return hasMatchingClasses(nA, cR) || hasMatchingClasses(nR, cA);
2235  });
2236
2237  this.$get = ['$$rAF', '$rootScope', '$rootElement', '$document', '$$Map',
2238               '$$animation', '$$AnimateRunner', '$templateRequest', '$$jqLite', '$$forceReflow',
2239               '$$isDocumentHidden',
2240       function($$rAF,   $rootScope,   $rootElement,   $document,   $$Map,
2241                $$animation,   $$AnimateRunner,   $templateRequest,   $$jqLite,   $$forceReflow,
2242                $$isDocumentHidden) {
2243
2244    var activeAnimationsLookup = new $$Map();
2245    var disabledElementsLookup = new $$Map();
2246    var animationsEnabled = null;
2247
2248    function postDigestTaskFactory() {
2249      var postDigestCalled = false;
2250      return function(fn) {
2251        // we only issue a call to postDigest before
2252        // it has first passed. This prevents any callbacks
2253        // from not firing once the animation has completed
2254        // since it will be out of the digest cycle.
2255        if (postDigestCalled) {
2256          fn();
2257        } else {
2258          $rootScope.$$postDigest(function() {
2259            postDigestCalled = true;
2260            fn();
2261          });
2262        }
2263      };
2264    }
2265
2266    // Wait until all directive and route-related templates are downloaded and
2267    // compiled. The $templateRequest.totalPendingRequests variable keeps track of
2268    // all of the remote templates being currently downloaded. If there are no
2269    // templates currently downloading then the watcher will still fire anyway.
2270    var deregisterWatch = $rootScope.$watch(
2271      function() { return $templateRequest.totalPendingRequests === 0; },
2272      function(isEmpty) {
2273        if (!isEmpty) return;
2274        deregisterWatch();
2275
2276        // Now that all templates have been downloaded, $animate will wait until
2277        // the post digest queue is empty before enabling animations. By having two
2278        // calls to $postDigest calls we can ensure that the flag is enabled at the
2279        // very end of the post digest queue. Since all of the animations in $animate
2280        // use $postDigest, it's important that the code below executes at the end.
2281        // This basically means that the page is fully downloaded and compiled before
2282        // any animations are triggered.
2283        $rootScope.$$postDigest(function() {
2284          $rootScope.$$postDigest(function() {
2285            // we check for null directly in the event that the application already called
2286            // .enabled() with whatever arguments that it provided it with
2287            if (animationsEnabled === null) {
2288              animationsEnabled = true;
2289            }
2290          });
2291        });
2292      }
2293    );
2294
2295    var callbackRegistry = Object.create(null);
2296
2297    // remember that the `customFilter`/`classNameFilter` are set during the
2298    // provider/config stage therefore we can optimize here and setup helper functions
2299    var customFilter = $animateProvider.customFilter();
2300    var classNameFilter = $animateProvider.classNameFilter();
2301    var returnTrue = function() { return true; };
2302
2303    var isAnimatableByFilter = customFilter || returnTrue;
2304    var isAnimatableClassName = !classNameFilter ? returnTrue : function(node, options) {
2305      var className = [node.getAttribute('class'), options.addClass, options.removeClass].join(' ');
2306      return classNameFilter.test(className);
2307    };
2308
2309    var applyAnimationClasses = applyAnimationClassesFactory($$jqLite);
2310
2311    function normalizeAnimationDetails(element, animation) {
2312      return mergeAnimationDetails(element, animation, {});
2313    }
2314
2315    // IE9-11 has no method "contains" in SVG element and in Node.prototype. Bug #10259.
2316    var contains = window.Node.prototype.contains || /** @this */ function(arg) {
2317      // eslint-disable-next-line no-bitwise
2318      return this === arg || !!(this.compareDocumentPosition(arg) & 16);
2319    };
2320
2321    function findCallbacks(targetParentNode, targetNode, event) {
2322      var matches = [];
2323      var entries = callbackRegistry[event];
2324      if (entries) {
2325        forEach(entries, function(entry) {
2326          if (contains.call(entry.node, targetNode)) {
2327            matches.push(entry.callback);
2328          } else if (event === 'leave' && contains.call(entry.node, targetParentNode)) {
2329            matches.push(entry.callback);
2330          }
2331        });
2332      }
2333
2334      return matches;
2335    }
2336
2337    function filterFromRegistry(list, matchContainer, matchCallback) {
2338      var containerNode = extractElementNode(matchContainer);
2339      return list.filter(function(entry) {
2340        var isMatch = entry.node === containerNode &&
2341                        (!matchCallback || entry.callback === matchCallback);
2342        return !isMatch;
2343      });
2344    }
2345
2346    function cleanupEventListeners(phase, node) {
2347      if (phase === 'close' && !node.parentNode) {
2348        // If the element is not attached to a parentNode, it has been removed by
2349        // the domOperation, and we can safely remove the event callbacks
2350        $animate.off(node);
2351      }
2352    }
2353
2354    var $animate = {
2355      on: function(event, container, callback) {
2356        var node = extractElementNode(container);
2357        callbackRegistry[event] = callbackRegistry[event] || [];
2358        callbackRegistry[event].push({
2359          node: node,
2360          callback: callback
2361        });
2362
2363        // Remove the callback when the element is removed from the DOM
2364        jqLite(container).on('$destroy', function() {
2365          var animationDetails = activeAnimationsLookup.get(node);
2366
2367          if (!animationDetails) {
2368            // If there's an animation ongoing, the callback calling code will remove
2369            // the event listeners. If we'd remove here, the callbacks would be removed
2370            // before the animation ends
2371            $animate.off(event, container, callback);
2372          }
2373        });
2374      },
2375
2376      off: function(event, container, callback) {
2377        if (arguments.length === 1 && !isString(arguments[0])) {
2378          container = arguments[0];
2379          for (var eventType in callbackRegistry) {
2380            callbackRegistry[eventType] = filterFromRegistry(callbackRegistry[eventType], container);
2381          }
2382
2383          return;
2384        }
2385
2386        var entries = callbackRegistry[event];
2387        if (!entries) return;
2388
2389        callbackRegistry[event] = arguments.length === 1
2390            ? null
2391            : filterFromRegistry(entries, container, callback);
2392      },
2393
2394      pin: function(element, parentElement) {
2395        assertArg(isElement(element), 'element', 'not an element');
2396        assertArg(isElement(parentElement), 'parentElement', 'not an element');
2397        element.data(NG_ANIMATE_PIN_DATA, parentElement);
2398      },
2399
2400      push: function(element, event, options, domOperation) {
2401        options = options || {};
2402        options.domOperation = domOperation;
2403        return queueAnimation(element, event, options);
2404      },
2405
2406      // this method has four signatures:
2407      //  () - global getter
2408      //  (bool) - global setter
2409      //  (element) - element getter
2410      //  (element, bool) - element setter<F37>
2411      enabled: function(element, bool) {
2412        var argCount = arguments.length;
2413
2414        if (argCount === 0) {
2415          // () - Global getter
2416          bool = !!animationsEnabled;
2417        } else {
2418          var hasElement = isElement(element);
2419
2420          if (!hasElement) {
2421            // (bool) - Global setter
2422            bool = animationsEnabled = !!element;
2423          } else {
2424            var node = getDomNode(element);
2425
2426            if (argCount === 1) {
2427              // (element) - Element getter
2428              bool = !disabledElementsLookup.get(node);
2429            } else {
2430              // (element, bool) - Element setter
2431              disabledElementsLookup.set(node, !bool);
2432            }
2433          }
2434        }
2435
2436        return bool;
2437      }
2438    };
2439
2440    return $animate;
2441
2442    function queueAnimation(originalElement, event, initialOptions) {
2443      // we always make a copy of the options since
2444      // there should never be any side effects on
2445      // the input data when running `$animateCss`.
2446      var options = copy(initialOptions);
2447
2448      var element = stripCommentsFromElement(originalElement);
2449      var node = getDomNode(element);
2450      var parentNode = node && node.parentNode;
2451
2452      options = prepareAnimationOptions(options);
2453
2454      // we create a fake runner with a working promise.
2455      // These methods will become available after the digest has passed
2456      var runner = new $$AnimateRunner();
2457
2458      // this is used to trigger callbacks in postDigest mode
2459      var runInNextPostDigestOrNow = postDigestTaskFactory();
2460
2461      if (isArray(options.addClass)) {
2462        options.addClass = options.addClass.join(' ');
2463      }
2464
2465      if (options.addClass && !isString(options.addClass)) {
2466        options.addClass = null;
2467      }
2468
2469      if (isArray(options.removeClass)) {
2470        options.removeClass = options.removeClass.join(' ');
2471      }
2472
2473      if (options.removeClass && !isString(options.removeClass)) {
2474        options.removeClass = null;
2475      }
2476
2477      if (options.from && !isObject(options.from)) {
2478        options.from = null;
2479      }
2480
2481      if (options.to && !isObject(options.to)) {
2482        options.to = null;
2483      }
2484
2485      // If animations are hard-disabled for the whole application there is no need to continue.
2486      // There are also situations where a directive issues an animation for a jqLite wrapper that
2487      // contains only comment nodes. In this case, there is no way we can perform an animation.
2488      if (!animationsEnabled ||
2489          !node ||
2490          !isAnimatableByFilter(node, event, initialOptions) ||
2491          !isAnimatableClassName(node, options)) {
2492        close();
2493        return runner;
2494      }
2495
2496      var isStructural = ['enter', 'move', 'leave'].indexOf(event) >= 0;
2497
2498      var documentHidden = $$isDocumentHidden();
2499
2500      // This is a hard disable of all animations the element itself, therefore  there is no need to
2501      // continue further past this point if not enabled
2502      // Animations are also disabled if the document is currently hidden (page is not visible
2503      // to the user), because browsers slow down or do not flush calls to requestAnimationFrame
2504      var skipAnimations = documentHidden || disabledElementsLookup.get(node);
2505      var existingAnimation = (!skipAnimations && activeAnimationsLookup.get(node)) || {};
2506      var hasExistingAnimation = !!existingAnimation.state;
2507
2508      // there is no point in traversing the same collection of parent ancestors if a followup
2509      // animation will be run on the same element that already did all that checking work
2510      if (!skipAnimations && (!hasExistingAnimation || existingAnimation.state !== PRE_DIGEST_STATE)) {
2511        skipAnimations = !areAnimationsAllowed(node, parentNode, event);
2512      }
2513
2514      if (skipAnimations) {
2515        // Callbacks should fire even if the document is hidden (regression fix for issue #14120)
2516        if (documentHidden) notifyProgress(runner, event, 'start');
2517        close();
2518        if (documentHidden) notifyProgress(runner, event, 'close');
2519        return runner;
2520      }
2521
2522      if (isStructural) {
2523        closeChildAnimations(node);
2524      }
2525
2526      var newAnimation = {
2527        structural: isStructural,
2528        element: element,
2529        event: event,
2530        addClass: options.addClass,
2531        removeClass: options.removeClass,
2532        close: close,
2533        options: options,
2534        runner: runner
2535      };
2536
2537      if (hasExistingAnimation) {
2538        var skipAnimationFlag = isAllowed('skip', newAnimation, existingAnimation);
2539        if (skipAnimationFlag) {
2540          if (existingAnimation.state === RUNNING_STATE) {
2541            close();
2542            return runner;
2543          } else {
2544            mergeAnimationDetails(element, existingAnimation, newAnimation);
2545            return existingAnimation.runner;
2546          }
2547        }
2548        var cancelAnimationFlag = isAllowed('cancel', newAnimation, existingAnimation);
2549        if (cancelAnimationFlag) {
2550          if (existingAnimation.state === RUNNING_STATE) {
2551            // this will end the animation right away and it is safe
2552            // to do so since the animation is already running and the
2553            // runner callback code will run in async
2554            existingAnimation.runner.end();
2555          } else if (existingAnimation.structural) {
2556            // this means that the animation is queued into a digest, but
2557            // hasn't started yet. Therefore it is safe to run the close
2558            // method which will call the runner methods in async.
2559            existingAnimation.close();
2560          } else {
2561            // this will merge the new animation options into existing animation options
2562            mergeAnimationDetails(element, existingAnimation, newAnimation);
2563
2564            return existingAnimation.runner;
2565          }
2566        } else {
2567          // a joined animation means that this animation will take over the existing one
2568          // so an example would involve a leave animation taking over an enter. Then when
2569          // the postDigest kicks in the enter will be ignored.
2570          var joinAnimationFlag = isAllowed('join', newAnimation, existingAnimation);
2571          if (joinAnimationFlag) {
2572            if (existingAnimation.state === RUNNING_STATE) {
2573              normalizeAnimationDetails(element, newAnimation);
2574            } else {
2575              applyGeneratedPreparationClasses(element, isStructural ? event : null, options);
2576
2577              event = newAnimation.event = existingAnimation.event;
2578              options = mergeAnimationDetails(element, existingAnimation, newAnimation);
2579
2580              //we return the same runner since only the option values of this animation will
2581              //be fed into the `existingAnimation`.
2582              return existingAnimation.runner;
2583            }
2584          }
2585        }
2586      } else {
2587        // normalization in this case means that it removes redundant CSS classes that
2588        // already exist (addClass) or do not exist (removeClass) on the element
2589        normalizeAnimationDetails(element, newAnimation);
2590      }
2591
2592      // when the options are merged and cleaned up we may end up not having to do
2593      // an animation at all, therefore we should check this before issuing a post
2594      // digest callback. Structural animations will always run no matter what.
2595      var isValidAnimation = newAnimation.structural;
2596      if (!isValidAnimation) {
2597        // animate (from/to) can be quickly checked first, otherwise we check if any classes are present
2598        isValidAnimation = (newAnimation.event === 'animate' && Object.keys(newAnimation.options.to || {}).length > 0)
2599                            || hasAnimationClasses(newAnimation);
2600      }
2601
2602      if (!isValidAnimation) {
2603        close();
2604        clearElementAnimationState(node);
2605        return runner;
2606      }
2607
2608      // the counter keeps track of cancelled animations
2609      var counter = (existingAnimation.counter || 0) + 1;
2610      newAnimation.counter = counter;
2611
2612      markElementAnimationState(node, PRE_DIGEST_STATE, newAnimation);
2613
2614      $rootScope.$$postDigest(function() {
2615        // It is possible that the DOM nodes inside `originalElement` have been replaced. This can
2616        // happen if the animated element is a transcluded clone and also has a `templateUrl`
2617        // directive on it. Therefore, we must recreate `element` in order to interact with the
2618        // actual DOM nodes.
2619        // Note: We still need to use the old `node` for certain things, such as looking up in
2620        //       HashMaps where it was used as the key.
2621
2622        element = stripCommentsFromElement(originalElement);
2623
2624        var animationDetails = activeAnimationsLookup.get(node);
2625        var animationCancelled = !animationDetails;
2626        animationDetails = animationDetails || {};
2627
2628        // if addClass/removeClass is called before something like enter then the
2629        // registered parent element may not be present. The code below will ensure
2630        // that a final value for parent element is obtained
2631        var parentElement = element.parent() || [];
2632
2633        // animate/structural/class-based animations all have requirements. Otherwise there
2634        // is no point in performing an animation. The parent node must also be set.
2635        var isValidAnimation = parentElement.length > 0
2636                                && (animationDetails.event === 'animate'
2637                                    || animationDetails.structural
2638                                    || hasAnimationClasses(animationDetails));
2639
2640        // this means that the previous animation was cancelled
2641        // even if the follow-up animation is the same event
2642        if (animationCancelled || animationDetails.counter !== counter || !isValidAnimation) {
2643          // if another animation did not take over then we need
2644          // to make sure that the domOperation and options are
2645          // handled accordingly
2646          if (animationCancelled) {
2647            applyAnimationClasses(element, options);
2648            applyAnimationStyles(element, options);
2649          }
2650
2651          // if the event changed from something like enter to leave then we do
2652          // it, otherwise if it's the same then the end result will be the same too
2653          if (animationCancelled || (isStructural && animationDetails.event !== event)) {
2654            options.domOperation();
2655            runner.end();
2656          }
2657
2658          // in the event that the element animation was not cancelled or a follow-up animation
2659          // isn't allowed to animate from here then we need to clear the state of the element
2660          // so that any future animations won't read the expired animation data.
2661          if (!isValidAnimation) {
2662            clearElementAnimationState(node);
2663          }
2664
2665          return;
2666        }
2667
2668        // this combined multiple class to addClass / removeClass into a setClass event
2669        // so long as a structural event did not take over the animation
2670        event = !animationDetails.structural && hasAnimationClasses(animationDetails, true)
2671            ? 'setClass'
2672            : animationDetails.event;
2673
2674        markElementAnimationState(node, RUNNING_STATE);
2675        var realRunner = $$animation(element, event, animationDetails.options);
2676
2677        // this will update the runner's flow-control events based on
2678        // the `realRunner` object.
2679        runner.setHost(realRunner);
2680        notifyProgress(runner, event, 'start', {});
2681
2682        realRunner.done(function(status) {
2683          close(!status);
2684          var animationDetails = activeAnimationsLookup.get(node);
2685          if (animationDetails && animationDetails.counter === counter) {
2686            clearElementAnimationState(node);
2687          }
2688          notifyProgress(runner, event, 'close', {});
2689        });
2690      });
2691
2692      return runner;
2693
2694      function notifyProgress(runner, event, phase, data) {
2695        runInNextPostDigestOrNow(function() {
2696          var callbacks = findCallbacks(parentNode, node, event);
2697          if (callbacks.length) {
2698            // do not optimize this call here to RAF because
2699            // we don't know how heavy the callback code here will
2700            // be and if this code is buffered then this can
2701            // lead to a performance regression.
2702            $$rAF(function() {
2703              forEach(callbacks, function(callback) {
2704                callback(element, phase, data);
2705              });
2706              cleanupEventListeners(phase, node);
2707            });
2708          } else {
2709            cleanupEventListeners(phase, node);
2710          }
2711        });
2712        runner.progress(event, phase, data);
2713      }
2714
2715      function close(reject) {
2716        clearGeneratedClasses(element, options);
2717        applyAnimationClasses(element, options);
2718        applyAnimationStyles(element, options);
2719        options.domOperation();
2720        runner.complete(!reject);
2721      }
2722    }
2723
2724    function closeChildAnimations(node) {
2725      var children = node.querySelectorAll('[' + NG_ANIMATE_ATTR_NAME + ']');
2726      forEach(children, function(child) {
2727        var state = parseInt(child.getAttribute(NG_ANIMATE_ATTR_NAME), 10);
2728        var animationDetails = activeAnimationsLookup.get(child);
2729        if (animationDetails) {
2730          switch (state) {
2731            case RUNNING_STATE:
2732              animationDetails.runner.end();
2733              /* falls through */
2734            case PRE_DIGEST_STATE:
2735              activeAnimationsLookup.delete(child);
2736              break;
2737          }
2738        }
2739      });
2740    }
2741
2742    function clearElementAnimationState(node) {
2743      node.removeAttribute(NG_ANIMATE_ATTR_NAME);
2744      activeAnimationsLookup.delete(node);
2745    }
2746
2747    /**
2748     * This fn returns false if any of the following is true:
2749     * a) animations on any parent element are disabled, and animations on the element aren't explicitly allowed
2750     * b) a parent element has an ongoing structural animation, and animateChildren is false
2751     * c) the element is not a child of the body
2752     * d) the element is not a child of the $rootElement
2753     */
2754    function areAnimationsAllowed(node, parentNode, event) {
2755      var bodyNode = $document[0].body;
2756      var rootNode = getDomNode($rootElement);
2757
2758      var bodyNodeDetected = (node === bodyNode) || node.nodeName === 'HTML';
2759      var rootNodeDetected = (node === rootNode);
2760      var parentAnimationDetected = false;
2761      var elementDisabled = disabledElementsLookup.get(node);
2762      var animateChildren;
2763
2764      var parentHost = jqLite.data(node, NG_ANIMATE_PIN_DATA);
2765      if (parentHost) {
2766        parentNode = getDomNode(parentHost);
2767      }
2768
2769      while (parentNode) {
2770        if (!rootNodeDetected) {
2771          // angular doesn't want to attempt to animate elements outside of the application
2772          // therefore we need to ensure that the rootElement is an ancestor of the current element
2773          rootNodeDetected = (parentNode === rootNode);
2774        }
2775
2776        if (parentNode.nodeType !== ELEMENT_NODE) {
2777          // no point in inspecting the #document element
2778          break;
2779        }
2780
2781        var details = activeAnimationsLookup.get(parentNode) || {};
2782        // either an enter, leave or move animation will commence
2783        // therefore we can't allow any animations to take place
2784        // but if a parent animation is class-based then that's ok
2785        if (!parentAnimationDetected) {
2786          var parentNodeDisabled = disabledElementsLookup.get(parentNode);
2787
2788          if (parentNodeDisabled === true && elementDisabled !== false) {
2789            // disable animations if the user hasn't explicitly enabled animations on the
2790            // current element
2791            elementDisabled = true;
2792            // element is disabled via parent element, no need to check anything else
2793            break;
2794          } else if (parentNodeDisabled === false) {
2795            elementDisabled = false;
2796          }
2797          parentAnimationDetected = details.structural;
2798        }
2799
2800        if (isUndefined(animateChildren) || animateChildren === true) {
2801          var value = jqLite.data(parentNode, NG_ANIMATE_CHILDREN_DATA);
2802          if (isDefined(value)) {
2803            animateChildren = value;
2804          }
2805        }
2806
2807        // there is no need to continue traversing at this point
2808        if (parentAnimationDetected && animateChildren === false) break;
2809
2810        if (!bodyNodeDetected) {
2811          // we also need to ensure that the element is or will be a part of the body element
2812          // otherwise it is pointless to even issue an animation to be rendered
2813          bodyNodeDetected = (parentNode === bodyNode);
2814        }
2815
2816        if (bodyNodeDetected && rootNodeDetected) {
2817          // If both body and root have been found, any other checks are pointless,
2818          // as no animation data should live outside the application
2819          break;
2820        }
2821
2822        if (!rootNodeDetected) {
2823          // If `rootNode` is not detected, check if `parentNode` is pinned to another element
2824          parentHost = jqLite.data(parentNode, NG_ANIMATE_PIN_DATA);
2825          if (parentHost) {
2826            // The pin target element becomes the next parent element
2827            parentNode = getDomNode(parentHost);
2828            continue;
2829          }
2830        }
2831
2832        parentNode = parentNode.parentNode;
2833      }
2834
2835      var allowAnimation = (!parentAnimationDetected || animateChildren) && elementDisabled !== true;
2836      return allowAnimation && rootNodeDetected && bodyNodeDetected;
2837    }
2838
2839    function markElementAnimationState(node, state, details) {
2840      details = details || {};
2841      details.state = state;
2842
2843      node.setAttribute(NG_ANIMATE_ATTR_NAME, state);
2844
2845      var oldValue = activeAnimationsLookup.get(node);
2846      var newValue = oldValue
2847          ? extend(oldValue, details)
2848          : details;
2849      activeAnimationsLookup.set(node, newValue);
2850    }
2851  }];
2852}];
2853
2854/* exported $$AnimationProvider */
2855
2856var $$AnimationProvider = ['$animateProvider', /** @this */ function($animateProvider) {
2857  var NG_ANIMATE_REF_ATTR = 'ng-animate-ref';
2858
2859  var drivers = this.drivers = [];
2860
2861  var RUNNER_STORAGE_KEY = '$$animationRunner';
2862
2863  function setRunner(element, runner) {
2864    element.data(RUNNER_STORAGE_KEY, runner);
2865  }
2866
2867  function removeRunner(element) {
2868    element.removeData(RUNNER_STORAGE_KEY);
2869  }
2870
2871  function getRunner(element) {
2872    return element.data(RUNNER_STORAGE_KEY);
2873  }
2874
2875  this.$get = ['$$jqLite', '$rootScope', '$injector', '$$AnimateRunner', '$$Map', '$$rAFScheduler',
2876       function($$jqLite,   $rootScope,   $injector,   $$AnimateRunner,   $$Map,   $$rAFScheduler) {
2877
2878    var animationQueue = [];
2879    var applyAnimationClasses = applyAnimationClassesFactory($$jqLite);
2880
2881    function sortAnimations(animations) {
2882      var tree = { children: [] };
2883      var i, lookup = new $$Map();
2884
2885      // this is done first beforehand so that the map
2886      // is filled with a list of the elements that will be animated
2887      for (i = 0; i < animations.length; i++) {
2888        var animation = animations[i];
2889        lookup.set(animation.domNode, animations[i] = {
2890          domNode: animation.domNode,
2891          fn: animation.fn,
2892          children: []
2893        });
2894      }
2895
2896      for (i = 0; i < animations.length; i++) {
2897        processNode(animations[i]);
2898      }
2899
2900      return flatten(tree);
2901
2902      function processNode(entry) {
2903        if (entry.processed) return entry;
2904        entry.processed = true;
2905
2906        var elementNode = entry.domNode;
2907        var parentNode = elementNode.parentNode;
2908        lookup.set(elementNode, entry);
2909
2910        var parentEntry;
2911        while (parentNode) {
2912          parentEntry = lookup.get(parentNode);
2913          if (parentEntry) {
2914            if (!parentEntry.processed) {
2915              parentEntry = processNode(parentEntry);
2916            }
2917            break;
2918          }
2919          parentNode = parentNode.parentNode;
2920        }
2921
2922        (parentEntry || tree).children.push(entry);
2923        return entry;
2924      }
2925
2926      function flatten(tree) {
2927        var result = [];
2928        var queue = [];
2929        var i;
2930
2931        for (i = 0; i < tree.children.length; i++) {
2932          queue.push(tree.children[i]);
2933        }
2934
2935        var remainingLevelEntries = queue.length;
2936        var nextLevelEntries = 0;
2937        var row = [];
2938
2939        for (i = 0; i < queue.length; i++) {
2940          var entry = queue[i];
2941          if (remainingLevelEntries <= 0) {
2942            remainingLevelEntries = nextLevelEntries;
2943            nextLevelEntries = 0;
2944            result.push(row);
2945            row = [];
2946          }
2947          row.push(entry.fn);