epsdk-app-onap/src/main/webapp/app/fusion/external/ebz/angular_js/angular-animate.js

   1 /**\r
   2  * @license AngularJS v1.4.3\r
   3  * (c) 2010-2015 Google, Inc. http://angularjs.org\r
   4  * License: MIT\r
   5  */\r
   6 (function(window, angular, undefined) {'use strict';\r
   7 \r
   8 /* jshint ignore:start */\r
   9 var noop        = angular.noop;\r
  10 var extend      = angular.extend;\r
  11 var jqLite      = angular.element;\r
  12 var forEach     = angular.forEach;\r
  13 var isArray     = angular.isArray;\r
  14 var isString    = angular.isString;\r
  15 var isObject    = angular.isObject;\r
  16 var isUndefined = angular.isUndefined;\r
  17 var isDefined   = angular.isDefined;\r
  18 var isFunction  = angular.isFunction;\r
  19 var isElement   = angular.isElement;\r
  20 \r
  21 var ELEMENT_NODE = 1;\r
  22 var COMMENT_NODE = 8;\r
  23 \r
  24 var NG_ANIMATE_CLASSNAME = 'ng-animate';\r
  25 var NG_ANIMATE_CHILDREN_DATA = '$$ngAnimateChildren';\r
  26 \r
  27 var isPromiseLike = function(p) {\r
  28   return p && p.then ? true : false;\r
  29 }\r
  30 \r
  31 function assertArg(arg, name, reason) {\r
  32   if (!arg) {\r
  33     throw ngMinErr('areq', "Argument '{0}' is {1}", (name || '?'), (reason || "required"));\r
  34   }\r
  35   return arg;\r
  36 }\r
  37 \r
  38 function mergeClasses(a,b) {\r
  39   if (!a && !b) return '';\r
  40   if (!a) return b;\r
  41   if (!b) return a;\r
  42   if (isArray(a)) a = a.join(' ');\r
  43   if (isArray(b)) b = b.join(' ');\r
  44   return a + ' ' + b;\r
  45 }\r
  46 \r
  47 function packageStyles(options) {\r
  48   var styles = {};\r
  49   if (options && (options.to || options.from)) {\r
  50     styles.to = options.to;\r
  51     styles.from = options.from;\r
  52   }\r
  53   return styles;\r
  54 }\r
  55 \r
  56 function pendClasses(classes, fix, isPrefix) {\r
  57   var className = '';\r
  58   classes = isArray(classes)\r
  59       ? classes\r
  60       : classes && isString(classes) && classes.length\r
  61           ? classes.split(/\s+/)\r
  62           : [];\r
  63   forEach(classes, function(klass, i) {\r
  64     if (klass && klass.length > 0) {\r
  65       className += (i > 0) ? ' ' : '';\r
  66       className += isPrefix ? fix + klass\r
  67                             : klass + fix;\r
  68     }\r
  69   });\r
  70   return className;\r
  71 }\r
  72 \r
  73 function removeFromArray(arr, val) {\r
  74   var index = arr.indexOf(val);\r
  75   if (val >= 0) {\r
  76     arr.splice(index, 1);\r
  77   }\r
  78 }\r
  79 \r
  80 function stripCommentsFromElement(element) {\r
  81   if (element instanceof jqLite) {\r
  82     switch (element.length) {\r
  83       case 0:\r
  84         return [];\r
  85         break;\r
  86 \r
  87       case 1:\r
  88         // there is no point of stripping anything if the element\r
  89         // is the only element within the jqLite wrapper.\r
  90         // (it's important that we retain the element instance.)\r
  91         if (element[0].nodeType === ELEMENT_NODE) {\r
  92           return element;\r
  93         }\r
  94         break;\r
  95 \r
  96       default:\r
  97         return jqLite(extractElementNode(element));\r
  98         break;\r
  99     }\r
 100   }\r
 101 \r
 102   if (element.nodeType === ELEMENT_NODE) {\r
 103     return jqLite(element);\r
 104   }\r
 105 }\r
 106 \r
 107 function extractElementNode(element) {\r
 108   if (!element[0]) return element;\r
 109   for (var i = 0; i < element.length; i++) {\r
 110     var elm = element[i];\r
 111     if (elm.nodeType == ELEMENT_NODE) {\r
 112       return elm;\r
 113     }\r
 114   }\r
 115 }\r
 116 \r
 117 function $$addClass($$jqLite, element, className) {\r
 118   forEach(element, function(elm) {\r
 119     $$jqLite.addClass(elm, className);\r
 120   });\r
 121 }\r
 122 \r
 123 function $$removeClass($$jqLite, element, className) {\r
 124   forEach(element, function(elm) {\r
 125     $$jqLite.removeClass(elm, className);\r
 126   });\r
 127 }\r
 128 \r
 129 function applyAnimationClassesFactory($$jqLite) {\r
 130   return function(element, options) {\r
 131     if (options.addClass) {\r
 132       $$addClass($$jqLite, element, options.addClass);\r
 133       options.addClass = null;\r
 134     }\r
 135     if (options.removeClass) {\r
 136       $$removeClass($$jqLite, element, options.removeClass);\r
 137       options.removeClass = null;\r
 138     }\r
 139   }\r
 140 }\r
 141 \r
 142 function prepareAnimationOptions(options) {\r
 143   options = options || {};\r
 144   if (!options.$$prepared) {\r
 145     var domOperation = options.domOperation || noop;\r
 146     options.domOperation = function() {\r
 147       options.$$domOperationFired = true;\r
 148       domOperation();\r
 149       domOperation = noop;\r
 150     };\r
 151     options.$$prepared = true;\r
 152   }\r
 153   return options;\r
 154 }\r
 155 \r
 156 function applyAnimationStyles(element, options) {\r
 157   applyAnimationFromStyles(element, options);\r
 158   applyAnimationToStyles(element, options);\r
 159 }\r
 160 \r
 161 function applyAnimationFromStyles(element, options) {\r
 162   if (options.from) {\r
 163     element.css(options.from);\r
 164     options.from = null;\r
 165   }\r
 166 }\r
 167 \r
 168 function applyAnimationToStyles(element, options) {\r
 169   if (options.to) {\r
 170     element.css(options.to);\r
 171     options.to = null;\r
 172   }\r
 173 }\r
 174 \r
 175 function mergeAnimationOptions(element, target, newOptions) {\r
 176   var toAdd = (target.addClass || '') + ' ' + (newOptions.addClass || '');\r
 177   var toRemove = (target.removeClass || '') + ' ' + (newOptions.removeClass || '');\r
 178   var classes = resolveElementClasses(element.attr('class'), toAdd, toRemove);\r
 179 \r
 180   extend(target, newOptions);\r
 181 \r
 182   if (classes.addClass) {\r
 183     target.addClass = classes.addClass;\r
 184   } else {\r
 185     target.addClass = null;\r
 186   }\r
 187 \r
 188   if (classes.removeClass) {\r
 189     target.removeClass = classes.removeClass;\r
 190   } else {\r
 191     target.removeClass = null;\r
 192   }\r
 193 \r
 194   return target;\r
 195 }\r
 196 \r
 197 function resolveElementClasses(existing, toAdd, toRemove) {\r
 198   var ADD_CLASS = 1;\r
 199   var REMOVE_CLASS = -1;\r
 200 \r
 201   var flags = {};\r
 202   existing = splitClassesToLookup(existing);\r
 203 \r
 204   toAdd = splitClassesToLookup(toAdd);\r
 205   forEach(toAdd, function(value, key) {\r
 206     flags[key] = ADD_CLASS;\r
 207   });\r
 208 \r
 209   toRemove = splitClassesToLookup(toRemove);\r
 210   forEach(toRemove, function(value, key) {\r
 211     flags[key] = flags[key] === ADD_CLASS ? null : REMOVE_CLASS;\r
 212   });\r
 213 \r
 214   var classes = {\r
 215     addClass: '',\r
 216     removeClass: ''\r
 217   };\r
 218 \r
 219   forEach(flags, function(val, klass) {\r
 220     var prop, allow;\r
 221     if (val === ADD_CLASS) {\r
 222       prop = 'addClass';\r
 223       allow = !existing[klass];\r
 224     } else if (val === REMOVE_CLASS) {\r
 225       prop = 'removeClass';\r
 226       allow = existing[klass];\r
 227     }\r
 228     if (allow) {\r
 229       if (classes[prop].length) {\r
 230         classes[prop] += ' ';\r
 231       }\r
 232       classes[prop] += klass;\r
 233     }\r
 234   });\r
 235 \r
 236   function splitClassesToLookup(classes) {\r
 237     if (isString(classes)) {\r
 238       classes = classes.split(' ');\r
 239     }\r
 240 \r
 241     var obj = {};\r
 242     forEach(classes, function(klass) {\r
 243       // sometimes the split leaves empty string values\r
 244       // incase extra spaces were applied to the options\r
 245       if (klass.length) {\r
 246         obj[klass] = true;\r
 247       }\r
 248     });\r
 249     return obj;\r
 250   }\r
 251 \r
 252   return classes;\r
 253 }\r
 254 \r
 255 function getDomNode(element) {\r
 256   return (element instanceof angular.element) ? element[0] : element;\r
 257 }\r
 258 \r
 259 var $$rAFSchedulerFactory = ['$$rAF', function($$rAF) {\r
 260   var tickQueue = [];\r
 261   var cancelFn;\r
 262 \r
 263   function scheduler(tasks) {\r
 264     // we make a copy since RAFScheduler mutates the state\r
 265     // of the passed in array variable and this would be difficult\r
 266     // to track down on the outside code\r
 267     tickQueue.push([].concat(tasks));\r
 268     nextTick();\r
 269   }\r
 270 \r
 271   /* waitUntilQuiet does two things:\r
 272    * 1. It will run the FINAL `fn` value only when an uncancelled RAF has passed through\r
 273    * 2. It will delay the next wave of tasks from running until the quiet `fn` has run.\r
 274    *\r
 275    * The motivation here is that animation code can request more time from the scheduler\r
 276    * before the next wave runs. This allows for certain DOM properties such as classes to\r
 277    * be resolved in time for the next animation to run.\r
 278    */\r
 279   scheduler.waitUntilQuiet = function(fn) {\r
 280     if (cancelFn) cancelFn();\r
 281 \r
 282     cancelFn = $$rAF(function() {\r
 283       cancelFn = null;\r
 284       fn();\r
 285       nextTick();\r
 286     });\r
 287   };\r
 288 \r
 289   return scheduler;\r
 290 \r
 291   function nextTick() {\r
 292     if (!tickQueue.length) return;\r
 293 \r
 294     var updatedQueue = [];\r
 295     for (var i = 0; i < tickQueue.length; i++) {\r
 296       var innerQueue = tickQueue[i];\r
 297       runNextTask(innerQueue);\r
 298       if (innerQueue.length) {\r
 299         updatedQueue.push(innerQueue);\r
 300       }\r
 301     }\r
 302     tickQueue = updatedQueue;\r
 303 \r
 304     if (!cancelFn) {\r
 305       $$rAF(function() {\r
 306         if (!cancelFn) nextTick();\r
 307       });\r
 308     }\r
 309   }\r
 310 \r
 311   function runNextTask(tasks) {\r
 312     var nextTask = tasks.shift();\r
 313     nextTask();\r
 314   }\r
 315 }];\r
 316 \r
 317 var $$AnimateChildrenDirective = [function() {\r
 318   return function(scope, element, attrs) {\r
 319     var val = attrs.ngAnimateChildren;\r
 320     if (angular.isString(val) && val.length === 0) { //empty attribute\r
 321       element.data(NG_ANIMATE_CHILDREN_DATA, true);\r
 322     } else {\r
 323       attrs.$observe('ngAnimateChildren', function(value) {\r
 324         value = value === 'on' || value === 'true';\r
 325         element.data(NG_ANIMATE_CHILDREN_DATA, value);\r
 326       });\r
 327     }\r
 328   };\r
 329 }];\r
 330 \r
 331 /**\r
 332  * @ngdoc service\r
 333  * @name $animateCss\r
 334  * @kind object\r
 335  *\r
 336  * @description\r
 337  * The `$animateCss` service is a useful utility to trigger customized CSS-based transitions/keyframes\r
 338  * from a JavaScript-based animation or directly from a directive. The purpose of `$animateCss` is NOT\r
 339  * to side-step how `$animate` and ngAnimate work, but the goal is to allow pre-existing animations or\r
 340  * directives to create more complex animations that can be purely driven using CSS code.\r
 341  *\r
 342  * Note that only browsers that support CSS transitions and/or keyframe animations are capable of\r
 343  * rendering animations triggered via `$animateCss` (bad news for IE9 and lower).\r
 344  *\r
 345  * ## Usage\r
 346  * Once again, `$animateCss` is designed to be used inside of a registered JavaScript animation that\r
 347  * is powered by ngAnimate. It is possible to use `$animateCss` directly inside of a directive, however,\r
 348  * any automatic control over cancelling animations and/or preventing animations from being run on\r
 349  * child elements will not be handled by Angular. For this to work as expected, please use `$animate` to\r
 350  * trigger the animation and then setup a JavaScript animation that injects `$animateCss` to trigger\r
 351  * the CSS animation.\r
 352  *\r
 353  * The example below shows how we can create a folding animation on an element using `ng-if`:\r
 354  *\r
 355  * ```html\r
 356  * <!-- notice the `fold-animation` CSS class -->\r
 357  * <div ng-if="onOff" class="fold-animation">\r
 358  *   This element will go BOOM\r
 359  * </div>\r
 360  * <button ng-click="onOff=true">Fold In</button>\r
 361  * ```\r
 362  *\r
 363  * Now we create the **JavaScript animation** that will trigger the CSS transition:\r
 364  *\r
 365  * ```js\r
 366  * ngModule.animation('.fold-animation', ['$animateCss', function($animateCss) {\r
 367  *   return {\r
 368  *     enter: function(element, doneFn) {\r
 369  *       var height = element[0].offsetHeight;\r
 370  *       return $animateCss(element, {\r
 371  *         from: { height:'0px' },\r
 372  *         to: { height:height + 'px' },\r
 373  *         duration: 1 // one second\r
 374  *       });\r
 375  *     }\r
 376  *   }\r
 377  * }]);\r
 378  * ```\r
 379  *\r
 380  * ## More Advanced Uses\r
 381  *\r
 382  * `$animateCss` is the underlying code that ngAnimate uses to power **CSS-based animations** behind the scenes. Therefore CSS hooks\r
 383  * like `.ng-EVENT`, `.ng-EVENT-active`, `.ng-EVENT-stagger` are all features that can be triggered using `$animateCss` via JavaScript code.\r
 384  *\r
 385  * This also means that just about any combination of adding classes, removing classes, setting styles, dynamically setting a keyframe animation,\r
 386  * applying a hardcoded duration or delay value, changing the animation easing or applying a stagger animation are all options that work with\r
 387  * `$animateCss`. The service itself is smart enough to figure out the combination of options and examine the element styling properties in order\r
 388  * to provide a working animation that will run in CSS.\r
 389  *\r
 390  * The example below showcases a more advanced version of the `.fold-animation` from the example above:\r
 391  *\r
 392  * ```js\r
 393  * ngModule.animation('.fold-animation', ['$animateCss', function($animateCss) {\r
 394  *   return {\r
 395  *     enter: function(element, doneFn) {\r
 396  *       var height = element[0].offsetHeight;\r
 397  *       return $animateCss(element, {\r
 398  *         addClass: 'red large-text pulse-twice',\r
 399  *         easing: 'ease-out',\r
 400  *         from: { height:'0px' },\r
 401  *         to: { height:height + 'px' },\r
 402  *         duration: 1 // one second\r
 403  *       });\r
 404  *     }\r
 405  *   }\r
 406  * }]);\r
 407  * ```\r
 408  *\r
 409  * Since we're adding/removing CSS classes then the CSS transition will also pick those up:\r
 410  *\r
 411  * ```css\r
 412  * /&#42; since a hardcoded duration value of 1 was provided in the JavaScript animation code,\r
 413  * the CSS classes below will be transitioned despite them being defined as regular CSS classes &#42;/\r
 414  * .red { background:red; }\r
 415  * .large-text { font-size:20px; }\r
 416  *\r
 417  * /&#42; we can also use a keyframe animation and $animateCss will make it work alongside the transition &#42;/\r
 418  * .pulse-twice {\r
 419  *   animation: 0.5s pulse linear 2;\r
 420  *   -webkit-animation: 0.5s pulse linear 2;\r
 421  * }\r
 422  *\r
 423  * @keyframes pulse {\r
 424  *   from { transform: scale(0.5); }\r
 425  *   to { transform: scale(1.5); }\r
 426  * }\r
 427  *\r
 428  * @-webkit-keyframes pulse {\r
 429  *   from { -webkit-transform: scale(0.5); }\r
 430  *   to { -webkit-transform: scale(1.5); }\r
 431  * }\r
 432  * ```\r
 433  *\r
 434  * Given this complex combination of CSS classes, styles and options, `$animateCss` will figure everything out and make the animation happen.\r
 435  *\r
 436  * ## How the Options are handled\r
 437  *\r
 438  * `$animateCss` is very versatile and intelligent when it comes to figuring out what configurations to apply to the element to ensure the animation\r
 439  * 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\r
 440  * styles using the `from` and `to` properties.\r
 441  *\r
 442  * ```js\r
 443  * var animator = $animateCss(element, {\r
 444  *   from: { background:'red' },\r
 445  *   to: { background:'blue' }\r
 446  * });\r
 447  * animator.start();\r
 448  * ```\r
 449  *\r
 450  * ```css\r
 451  * .rotating-animation {\r
 452  *   animation:0.5s rotate linear;\r
 453  *   -webkit-animation:0.5s rotate linear;\r
 454  * }\r
 455  *\r
 456  * @keyframes rotate {\r
 457  *   from { transform: rotate(0deg); }\r
 458  *   to { transform: rotate(360deg); }\r
 459  * }\r
 460  *\r
 461  * @-webkit-keyframes rotate {\r
 462  *   from { -webkit-transform: rotate(0deg); }\r
 463  *   to { -webkit-transform: rotate(360deg); }\r
 464  * }\r
 465  * ```\r
 466  *\r
 467  * 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\r
 468  * going to be detected from what the keyframe styles on the CSS class are. In this event, `$animateCss` will automatically create an inline transition\r
 469  * 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\r
 470  * 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\r
 471  * and spread across the transition and keyframe animation.\r
 472  *\r
 473  * ## What is returned\r
 474  *\r
 475  * `$animateCss` works in two stages: a preparation phase and an animation phase. Therefore when `$animateCss` is first called it will NOT actually\r
 476  * 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\r
 477  * added and removed on the element). Once `$animateCss` is called it will return an object with the following properties:\r
 478  *\r
 479  * ```js\r
 480  * var animator = $animateCss(element, { ... });\r
 481  * ```\r
 482  *\r
 483  * Now what do the contents of our `animator` variable look like:\r
 484  *\r
 485  * ```js\r
 486  * {\r
 487  *   // starts the animation\r
 488  *   start: Function,\r
 489  *\r
 490  *   // ends (aborts) the animation\r
 491  *   end: Function\r
 492  * }\r
 493  * ```\r
 494  *\r
 495  * 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.\r
 496  * 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 stlyes may have been\r
 497  * applied to the element during the preparation phase). Note that all other properties such as duration, delay, transitions and keyframes are just properties\r
 498  * and that changing them will not reconfigure the parameters of the animation.\r
 499  *\r
 500  * ### runner.done() vs runner.then()\r
 501  * 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\r
 502  * runner called `.done(callbackFn)`. The done method works the same as `.finally(callbackFn)`, however, it does **not trigger a digest to occur**.\r
 503  * Therefore, for performance reasons, it's always best to use `runner.done(callback)` instead of `runner.then()`, `runner.catch()` or `runner.finally()`\r
 504  * unless you really need a digest to kick off afterwards.\r
 505  *\r
 506  * 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\r
 507  * (so there is no need to call `runner.done(doneFn)` inside of your JavaScript animation code).\r
 508  * Check the {@link ngAnimate.$animateCss#usage animation code above} to see how this works.\r
 509  *\r
 510  * @param {DOMElement} element the element that will be animated\r
 511  * @param {object} options the animation-related options that will be applied during the animation\r
 512  *\r
 513  * * `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\r
 514  * 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.)\r
 515  * * `easing` - The CSS easing value that will be applied to the transition or keyframe animation (or both).\r
 516  * * `transition` - The raw CSS transition style that will be used (e.g. `1s linear all`).\r
 517  * * `keyframeStyle` - The raw CSS keyframe animation style that will be used (e.g. `1s my_animation linear`).\r
 518  * * `from` - The starting CSS styles (a key/value object) that will be applied at the start of the animation.\r
 519  * * `to` - The ending CSS styles (a key/value object) that will be applied across the animation via a CSS transition.\r
 520  * * `addClass` - A space separated list of CSS classes that will be added to the element and spread across the animation.\r
 521  * * `removeClass` - A space separated list of CSS classes that will be removed from the element and spread across the animation.\r
 522  * * `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`\r
 523  * is provided then the animation will be skipped entirely.\r
 524  * * `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\r
 525  * 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\r
 526  * 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\r
 527  * CSS delay value.\r
 528  * * `stagger` - A numeric time value representing the delay between successively animated elements\r
 529  * ({@link ngAnimate#css-staggering-animations Click here to learn how CSS-based staggering works in ngAnimate.})\r
 530  * * `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\r
 531  * `stagger` option value of `0.1` is used then there will be a stagger delay of `600ms`)\r
 532  * `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 occuring on the classes being added and removed.)\r
 533  *\r
 534  * @return {object} an object with start and end methods and details about the animation.\r
 535  *\r
 536  * * `start` - The method to start the animation. This will return a `Promise` when called.\r
 537  * * `end` - This method will cancel the animation and remove all applied CSS classes and styles.\r
 538  */\r
 539 \r
 540 // Detect proper transitionend/animationend event names.\r
 541 var CSS_PREFIX = '', TRANSITION_PROP, TRANSITIONEND_EVENT, ANIMATION_PROP, ANIMATIONEND_EVENT;\r
 542 \r
 543 // If unprefixed events are not supported but webkit-prefixed are, use the latter.\r
 544 // Otherwise, just use W3C names, browsers not supporting them at all will just ignore them.\r
 545 // Note: Chrome implements `window.onwebkitanimationend` and doesn't implement `window.onanimationend`\r
 546 // but at the same time dispatches the `animationend` event and not `webkitAnimationEnd`.\r
 547 // Register both events in case `window.onanimationend` is not supported because of that,\r
 548 // do the same for `transitionend` as Safari is likely to exhibit similar behavior.\r
 549 // Also, the only modern browser that uses vendor prefixes for transitions/keyframes is webkit\r
 550 // therefore there is no reason to test anymore for other vendor prefixes:\r
 551 // http://caniuse.com/#search=transition\r
 552 if (window.ontransitionend === undefined && window.onwebkittransitionend !== undefined) {\r
 553   CSS_PREFIX = '-webkit-';\r
 554   TRANSITION_PROP = 'WebkitTransition';\r
 555   TRANSITIONEND_EVENT = 'webkitTransitionEnd transitionend';\r
 556 } else {\r
 557   TRANSITION_PROP = 'transition';\r
 558   TRANSITIONEND_EVENT = 'transitionend';\r
 559 }\r
 560 \r
 561 if (window.onanimationend === undefined && window.onwebkitanimationend !== undefined) {\r
 562   CSS_PREFIX = '-webkit-';\r
 563   ANIMATION_PROP = 'WebkitAnimation';\r
 564   ANIMATIONEND_EVENT = 'webkitAnimationEnd animationend';\r
 565 } else {\r
 566   ANIMATION_PROP = 'animation';\r
 567   ANIMATIONEND_EVENT = 'animationend';\r
 568 }\r
 569 \r
 570 var DURATION_KEY = 'Duration';\r
 571 var PROPERTY_KEY = 'Property';\r
 572 var DELAY_KEY = 'Delay';\r
 573 var TIMING_KEY = 'TimingFunction';\r
 574 var ANIMATION_ITERATION_COUNT_KEY = 'IterationCount';\r
 575 var ANIMATION_PLAYSTATE_KEY = 'PlayState';\r
 576 var ELAPSED_TIME_MAX_DECIMAL_PLACES = 3;\r
 577 var CLOSING_TIME_BUFFER = 1.5;\r
 578 var ONE_SECOND = 1000;\r
 579 var BASE_TEN = 10;\r
 580 \r
 581 var SAFE_FAST_FORWARD_DURATION_VALUE = 9999;\r
 582 \r
 583 var ANIMATION_DELAY_PROP = ANIMATION_PROP + DELAY_KEY;\r
 584 var ANIMATION_DURATION_PROP = ANIMATION_PROP + DURATION_KEY;\r
 585 \r
 586 var TRANSITION_DELAY_PROP = TRANSITION_PROP + DELAY_KEY;\r
 587 var TRANSITION_DURATION_PROP = TRANSITION_PROP + DURATION_KEY;\r
 588 \r
 589 var DETECT_CSS_PROPERTIES = {\r
 590   transitionDuration:      TRANSITION_DURATION_PROP,\r
 591   transitionDelay:         TRANSITION_DELAY_PROP,\r
 592   transitionProperty:      TRANSITION_PROP + PROPERTY_KEY,\r
 593   animationDuration:       ANIMATION_DURATION_PROP,\r
 594   animationDelay:          ANIMATION_DELAY_PROP,\r
 595   animationIterationCount: ANIMATION_PROP + ANIMATION_ITERATION_COUNT_KEY\r
 596 };\r
 597 \r
 598 var DETECT_STAGGER_CSS_PROPERTIES = {\r
 599   transitionDuration:      TRANSITION_DURATION_PROP,\r
 600   transitionDelay:         TRANSITION_DELAY_PROP,\r
 601   animationDuration:       ANIMATION_DURATION_PROP,\r
 602   animationDelay:          ANIMATION_DELAY_PROP\r
 603 };\r
 604 \r
 605 function computeCssStyles($window, element, properties) {\r
 606   var styles = Object.create(null);\r
 607   var detectedStyles = $window.getComputedStyle(element) || {};\r
 608   forEach(properties, function(formalStyleName, actualStyleName) {\r
 609     var val = detectedStyles[formalStyleName];\r
 610     if (val) {\r
 611       var c = val.charAt(0);\r
 612 \r
 613       // only numerical-based values have a negative sign or digit as the first value\r
 614       if (c === '-' || c === '+' || c >= 0) {\r
 615         val = parseMaxTime(val);\r
 616       }\r
 617 \r
 618       // by setting this to null in the event that the delay is not set or is set directly as 0\r
 619       // then we can still allow for zegative values to be used later on and not mistake this\r
 620       // value for being greater than any other negative value.\r
 621       if (val === 0) {\r
 622         val = null;\r
 623       }\r
 624       styles[actualStyleName] = val;\r
 625     }\r
 626   });\r
 627 \r
 628   return styles;\r
 629 }\r
 630 \r
 631 function parseMaxTime(str) {\r
 632   var maxValue = 0;\r
 633   var values = str.split(/\s*,\s*/);\r
 634   forEach(values, function(value) {\r
 635     // it's always safe to consider only second values and omit `ms` values since\r
 636     // getComputedStyle will always handle the conversion for us\r
 637     if (value.charAt(value.length - 1) == 's') {\r
 638       value = value.substring(0, value.length - 1);\r
 639     }\r
 640     value = parseFloat(value) || 0;\r
 641     maxValue = maxValue ? Math.max(value, maxValue) : value;\r
 642   });\r
 643   return maxValue;\r
 644 }\r
 645 \r
 646 function truthyTimingValue(val) {\r
 647   return val === 0 || val != null;\r
 648 }\r
 649 \r
 650 function getCssTransitionDurationStyle(duration, applyOnlyDuration) {\r
 651   var style = TRANSITION_PROP;\r
 652   var value = duration + 's';\r
 653   if (applyOnlyDuration) {\r
 654     style += DURATION_KEY;\r
 655   } else {\r
 656     value += ' linear all';\r
 657   }\r
 658   return [style, value];\r
 659 }\r
 660 \r
 661 function getCssKeyframeDurationStyle(duration) {\r
 662   return [ANIMATION_DURATION_PROP, duration + 's'];\r
 663 }\r
 664 \r
 665 function getCssDelayStyle(delay, isKeyframeAnimation) {\r
 666   var prop = isKeyframeAnimation ? ANIMATION_DELAY_PROP : TRANSITION_DELAY_PROP;\r
 667   return [prop, delay + 's'];\r
 668 }\r
 669 \r
 670 function blockTransitions(node, duration) {\r
 671   // we use a negative delay value since it performs blocking\r
 672   // yet it doesn't kill any existing transitions running on the\r
 673   // same element which makes this safe for class-based animations\r
 674   var value = duration ? '-' + duration + 's' : '';\r
 675   applyInlineStyle(node, [TRANSITION_DELAY_PROP, value]);\r
 676   return [TRANSITION_DELAY_PROP, value];\r
 677 }\r
 678 \r
 679 function blockKeyframeAnimations(node, applyBlock) {\r
 680   var value = applyBlock ? 'paused' : '';\r
 681   var key = ANIMATION_PROP + ANIMATION_PLAYSTATE_KEY;\r
 682   applyInlineStyle(node, [key, value]);\r
 683   return [key, value];\r
 684 }\r
 685 \r
 686 function applyInlineStyle(node, styleTuple) {\r
 687   var prop = styleTuple[0];\r
 688   var value = styleTuple[1];\r
 689   node.style[prop] = value;\r
 690 }\r
 691 \r
 692 function createLocalCacheLookup() {\r
 693   var cache = Object.create(null);\r
 694   return {\r
 695     flush: function() {\r
 696       cache = Object.create(null);\r
 697     },\r
 698 \r
 699     count: function(key) {\r
 700       var entry = cache[key];\r
 701       return entry ? entry.total : 0;\r
 702     },\r
 703 \r
 704     get: function(key) {\r
 705       var entry = cache[key];\r
 706       return entry && entry.value;\r
 707     },\r
 708 \r
 709     put: function(key, value) {\r
 710       if (!cache[key]) {\r
 711         cache[key] = { total: 1, value: value };\r
 712       } else {\r
 713         cache[key].total++;\r
 714       }\r
 715     }\r
 716   };\r
 717 }\r
 718 \r
 719 var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {\r
 720   var gcsLookup = createLocalCacheLookup();\r
 721   var gcsStaggerLookup = createLocalCacheLookup();\r
 722 \r
 723   this.$get = ['$window', '$$jqLite', '$$AnimateRunner', '$timeout',\r
 724                '$document', '$sniffer', '$$rAFScheduler',\r
 725        function($window,   $$jqLite,   $$AnimateRunner,   $timeout,\r
 726                 $document,   $sniffer,   $$rAFScheduler) {\r
 727 \r
 728     var applyAnimationClasses = applyAnimationClassesFactory($$jqLite);\r
 729 \r
 730     var parentCounter = 0;\r
 731     function gcsHashFn(node, extraClasses) {\r
 732       var KEY = "$$ngAnimateParentKey";\r
 733       var parentNode = node.parentNode;\r
 734       var parentID = parentNode[KEY] || (parentNode[KEY] = ++parentCounter);\r
 735       return parentID + '-' + node.getAttribute('class') + '-' + extraClasses;\r
 736     }\r
 737 \r
 738     function computeCachedCssStyles(node, className, cacheKey, properties) {\r
 739       var timings = gcsLookup.get(cacheKey);\r
 740 \r
 741       if (!timings) {\r
 742         timings = computeCssStyles($window, node, properties);\r
 743         if (timings.animationIterationCount === 'infinite') {\r
 744           timings.animationIterationCount = 1;\r
 745         }\r
 746       }\r
 747 \r
 748       // we keep putting this in multiple times even though the value and the cacheKey are the same\r
 749       // because we're keeping an interal tally of how many duplicate animations are detected.\r
 750       gcsLookup.put(cacheKey, timings);\r
 751       return timings;\r
 752     }\r
 753 \r
 754     function computeCachedCssStaggerStyles(node, className, cacheKey, properties) {\r
 755       var stagger;\r
 756 \r
 757       // if we have one or more existing matches of matching elements\r
 758       // containing the same parent + CSS styles (which is how cacheKey works)\r
 759       // then staggering is possible\r
 760       if (gcsLookup.count(cacheKey) > 0) {\r
 761         stagger = gcsStaggerLookup.get(cacheKey);\r
 762 \r
 763         if (!stagger) {\r
 764           var staggerClassName = pendClasses(className, '-stagger');\r
 765 \r
 766           $$jqLite.addClass(node, staggerClassName);\r
 767 \r
 768           stagger = computeCssStyles($window, node, properties);\r
 769 \r
 770           // force the conversion of a null value to zero incase not set\r
 771           stagger.animationDuration = Math.max(stagger.animationDuration, 0);\r
 772           stagger.transitionDuration = Math.max(stagger.transitionDuration, 0);\r
 773 \r
 774           $$jqLite.removeClass(node, staggerClassName);\r
 775 \r
 776           gcsStaggerLookup.put(cacheKey, stagger);\r
 777         }\r
 778       }\r
 779 \r
 780       return stagger || {};\r
 781     }\r
 782 \r
 783     var bod = getDomNode($document).body;\r
 784     var rafWaitQueue = [];\r
 785     function waitUntilQuiet(callback) {\r
 786       rafWaitQueue.push(callback);\r
 787       $$rAFScheduler.waitUntilQuiet(function() {\r
 788         gcsLookup.flush();\r
 789         gcsStaggerLookup.flush();\r
 790 \r
 791         //the line below will force the browser to perform a repaint so\r
 792         //that all the animated elements within the animation frame will\r
 793         //be properly updated and drawn on screen. This is required to\r
 794         //ensure that the preparation animation is properly flushed so that\r
 795         //the active state picks up from there. DO NOT REMOVE THIS LINE.\r
 796         //DO NOT OPTIMIZE THIS LINE. THE MINIFIER WILL REMOVE IT OTHERWISE WHICH\r
 797         //WILL RESULT IN AN UNPREDICTABLE BUG THAT IS VERY HARD TO TRACK DOWN AND\r
 798         //WILL TAKE YEARS AWAY FROM YOUR LIFE.\r
 799         var width = bod.offsetWidth + 1;\r
 800 \r
 801         // we use a for loop to ensure that if the queue is changed\r
 802         // during this looping then it will consider new requests\r
 803         for (var i = 0; i < rafWaitQueue.length; i++) {\r
 804           rafWaitQueue[i](width);\r
 805         }\r
 806         rafWaitQueue.length = 0;\r
 807       });\r
 808     }\r
 809 \r
 810     return init;\r
 811 \r
 812     function computeTimings(node, className, cacheKey) {\r
 813       var timings = computeCachedCssStyles(node, className, cacheKey, DETECT_CSS_PROPERTIES);\r
 814       var aD = timings.animationDelay;\r
 815       var tD = timings.transitionDelay;\r
 816       timings.maxDelay = aD && tD\r
 817           ? Math.max(aD, tD)\r
 818           : (aD || tD);\r
 819       timings.maxDuration = Math.max(\r
 820           timings.animationDuration * timings.animationIterationCount,\r
 821           timings.transitionDuration);\r
 822 \r
 823       return timings;\r
 824     }\r
 825 \r
 826     function init(element, options) {\r
 827       var node = getDomNode(element);\r
 828       if (!node || !node.parentNode) {\r
 829         return closeAndReturnNoopAnimator();\r
 830       }\r
 831 \r
 832       options = prepareAnimationOptions(options);\r
 833 \r
 834       var temporaryStyles = [];\r
 835       var classes = element.attr('class');\r
 836       var styles = packageStyles(options);\r
 837       var animationClosed;\r
 838       var animationPaused;\r
 839       var animationCompleted;\r
 840       var runner;\r
 841       var runnerHost;\r
 842       var maxDelay;\r
 843       var maxDelayTime;\r
 844       var maxDuration;\r
 845       var maxDurationTime;\r
 846 \r
 847       if (options.duration === 0 || (!$sniffer.animations && !$sniffer.transitions)) {\r
 848         return closeAndReturnNoopAnimator();\r
 849       }\r
 850 \r
 851       var method = options.event && isArray(options.event)\r
 852             ? options.event.join(' ')\r
 853             : options.event;\r
 854 \r
 855       var isStructural = method && options.structural;\r
 856       var structuralClassName = '';\r
 857       var addRemoveClassName = '';\r
 858 \r
 859       if (isStructural) {\r
 860         structuralClassName = pendClasses(method, 'ng-', true);\r
 861       } else if (method) {\r
 862         structuralClassName = method;\r
 863       }\r
 864 \r
 865       if (options.addClass) {\r
 866         addRemoveClassName += pendClasses(options.addClass, '-add');\r
 867       }\r
 868 \r
 869       if (options.removeClass) {\r
 870         if (addRemoveClassName.length) {\r
 871           addRemoveClassName += ' ';\r
 872         }\r
 873         addRemoveClassName += pendClasses(options.removeClass, '-remove');\r
 874       }\r
 875 \r
 876       // there may be a situation where a structural animation is combined together\r
 877       // with CSS classes that need to resolve before the animation is computed.\r
 878       // However this means that there is no explicit CSS code to block the animation\r
 879       // from happening (by setting 0s none in the class name). If this is the case\r
 880       // we need to apply the classes before the first rAF so we know to continue if\r
 881       // there actually is a detected transition or keyframe animation\r
 882       if (options.applyClassesEarly && addRemoveClassName.length) {\r
 883         applyAnimationClasses(element, options);\r
 884         addRemoveClassName = '';\r
 885       }\r
 886 \r
 887       var setupClasses = [structuralClassName, addRemoveClassName].join(' ').trim();\r
 888       var fullClassName = classes + ' ' + setupClasses;\r
 889       var activeClasses = pendClasses(setupClasses, '-active');\r
 890       var hasToStyles = styles.to && Object.keys(styles.to).length > 0;\r
 891       var containsKeyframeAnimation = (options.keyframeStyle || '').length > 0;\r
 892 \r
 893       // there is no way we can trigger an animation if no styles and\r
 894       // no classes are being applied which would then trigger a transition,\r
 895       // unless there a is raw keyframe value that is applied to the element.\r
 896       if (!containsKeyframeAnimation\r
 897            && !hasToStyles\r
 898            && !setupClasses) {\r
 899         return closeAndReturnNoopAnimator();\r
 900       }\r
 901 \r
 902       var cacheKey, stagger;\r
 903       if (options.stagger > 0) {\r
 904         var staggerVal = parseFloat(options.stagger);\r
 905         stagger = {\r
 906           transitionDelay: staggerVal,\r
 907           animationDelay: staggerVal,\r
 908           transitionDuration: 0,\r
 909           animationDuration: 0\r
 910         };\r
 911       } else {\r
 912         cacheKey = gcsHashFn(node, fullClassName);\r
 913         stagger = computeCachedCssStaggerStyles(node, setupClasses, cacheKey, DETECT_STAGGER_CSS_PROPERTIES);\r
 914       }\r
 915 \r
 916       $$jqLite.addClass(element, setupClasses);\r
 917 \r
 918       var applyOnlyDuration;\r
 919 \r
 920       if (options.transitionStyle) {\r
 921         var transitionStyle = [TRANSITION_PROP, options.transitionStyle];\r
 922         applyInlineStyle(node, transitionStyle);\r
 923         temporaryStyles.push(transitionStyle);\r
 924       }\r
 925 \r
 926       if (options.duration >= 0) {\r
 927         applyOnlyDuration = node.style[TRANSITION_PROP].length > 0;\r
 928         var durationStyle = getCssTransitionDurationStyle(options.duration, applyOnlyDuration);\r
 929 \r
 930         // we set the duration so that it will be picked up by getComputedStyle later\r
 931         applyInlineStyle(node, durationStyle);\r
 932         temporaryStyles.push(durationStyle);\r
 933       }\r
 934 \r
 935       if (options.keyframeStyle) {\r
 936         var keyframeStyle = [ANIMATION_PROP, options.keyframeStyle];\r
 937         applyInlineStyle(node, keyframeStyle);\r
 938         temporaryStyles.push(keyframeStyle);\r
 939       }\r
 940 \r
 941       var itemIndex = stagger\r
 942           ? options.staggerIndex >= 0\r
 943               ? options.staggerIndex\r
 944               : gcsLookup.count(cacheKey)\r
 945           : 0;\r
 946 \r
 947       var isFirst = itemIndex === 0;\r
 948 \r
 949       // this is a pre-emptive way of forcing the setup classes to be added and applied INSTANTLY\r
 950       // without causing any combination of transitions to kick in. By adding a negative delay value\r
 951       // it forces the setup class' transition to end immediately. We later then remove the negative\r
 952       // transition delay to allow for the transition to naturally do it's thing. The beauty here is\r
 953       // that if there is no transition defined then nothing will happen and this will also allow\r
 954       // other transitions to be stacked on top of each other without any chopping them out.\r
 955       if (isFirst) {\r
 956         blockTransitions(node, SAFE_FAST_FORWARD_DURATION_VALUE);\r
 957       }\r
 958 \r
 959       var timings = computeTimings(node, fullClassName, cacheKey);\r
 960       var relativeDelay = timings.maxDelay;\r
 961       maxDelay = Math.max(relativeDelay, 0);\r
 962       maxDuration = timings.maxDuration;\r
 963 \r
 964       var flags = {};\r
 965       flags.hasTransitions          = timings.transitionDuration > 0;\r
 966       flags.hasAnimations           = timings.animationDuration > 0;\r
 967       flags.hasTransitionAll        = flags.hasTransitions && timings.transitionProperty == 'all';\r
 968       flags.applyTransitionDuration = hasToStyles && (\r
 969                                         (flags.hasTransitions && !flags.hasTransitionAll)\r
 970                                          || (flags.hasAnimations && !flags.hasTransitions));\r
 971       flags.applyAnimationDuration  = options.duration && flags.hasAnimations;\r
 972       flags.applyTransitionDelay    = truthyTimingValue(options.delay) && (flags.applyTransitionDuration || flags.hasTransitions);\r
 973       flags.applyAnimationDelay     = truthyTimingValue(options.delay) && flags.hasAnimations;\r
 974       flags.recalculateTimingStyles = addRemoveClassName.length > 0;\r
 975 \r
 976       if (flags.applyTransitionDuration || flags.applyAnimationDuration) {\r
 977         maxDuration = options.duration ? parseFloat(options.duration) : maxDuration;\r
 978 \r
 979         if (flags.applyTransitionDuration) {\r
 980           flags.hasTransitions = true;\r
 981           timings.transitionDuration = maxDuration;\r
 982           applyOnlyDuration = node.style[TRANSITION_PROP + PROPERTY_KEY].length > 0;\r
 983           temporaryStyles.push(getCssTransitionDurationStyle(maxDuration, applyOnlyDuration));\r
 984         }\r
 985 \r
 986         if (flags.applyAnimationDuration) {\r
 987           flags.hasAnimations = true;\r
 988           timings.animationDuration = maxDuration;\r
 989           temporaryStyles.push(getCssKeyframeDurationStyle(maxDuration));\r
 990         }\r
 991       }\r
 992 \r
 993       if (maxDuration === 0 && !flags.recalculateTimingStyles) {\r
 994         return closeAndReturnNoopAnimator();\r
 995       }\r
 996 \r
 997       // we need to recalculate the delay value since we used a pre-emptive negative\r
 998       // delay value and the delay value is required for the final event checking. This\r
 999       // property will ensure that this will happen after the RAF phase has passed.\r
1000       if (options.duration == null && timings.transitionDuration > 0) {\r
1001         flags.recalculateTimingStyles = flags.recalculateTimingStyles || isFirst;\r
1002       }\r
1003 \r
1004       maxDelayTime = maxDelay * ONE_SECOND;\r
1005       maxDurationTime = maxDuration * ONE_SECOND;\r
1006       if (!options.skipBlocking) {\r
1007         flags.blockTransition = timings.transitionDuration > 0;\r
1008         flags.blockKeyframeAnimation = timings.animationDuration > 0 &&\r
1009                                        stagger.animationDelay > 0 &&\r
1010                                        stagger.animationDuration === 0;\r
1011       }\r
1012 \r
1013       applyAnimationFromStyles(element, options);\r
1014       if (!flags.blockTransition) {\r
1015         blockTransitions(node, false);\r
1016       }\r
1017 \r
1018       applyBlocking(maxDuration);\r
1019 \r
1020       // TODO(matsko): for 1.5 change this code to have an animator object for better debugging\r
1021       return {\r
1022         $$willAnimate: true,\r
1023         end: endFn,\r
1024         start: function() {\r
1025           if (animationClosed) return;\r
1026 \r
1027           runnerHost = {\r
1028             end: endFn,\r
1029             cancel: cancelFn,\r
1030             resume: null, //this will be set during the start() phase\r
1031             pause: null\r
1032           };\r
1033 \r
1034           runner = new $$AnimateRunner(runnerHost);\r
1035 \r
1036           waitUntilQuiet(start);\r
1037 \r
1038           // we don't have access to pause/resume the animation\r
1039           // since it hasn't run yet. AnimateRunner will therefore\r
1040           // set noop functions for resume and pause and they will\r
1041           // later be overridden once the animation is triggered\r
1042           return runner;\r
1043         }\r
1044       };\r
1045 \r
1046       function endFn() {\r
1047         close();\r
1048       }\r
1049 \r
1050       function cancelFn() {\r
1051         close(true);\r
1052       }\r
1053 \r
1054       function close(rejected) { // jshint ignore:line\r
1055         // if the promise has been called already then we shouldn't close\r
1056         // the animation again\r
1057         if (animationClosed || (animationCompleted && animationPaused)) return;\r
1058         animationClosed = true;\r
1059         animationPaused = false;\r
1060 \r
1061         $$jqLite.removeClass(element, setupClasses);\r
1062         $$jqLite.removeClass(element, activeClasses);\r
1063 \r
1064         blockKeyframeAnimations(node, false);\r
1065         blockTransitions(node, false);\r
1066 \r
1067         forEach(temporaryStyles, function(entry) {\r
1068           // There is only one way to remove inline style properties entirely from elements.\r
1069           // By using `removeProperty` this works, but we need to convert camel-cased CSS\r
1070           // styles down to hyphenated values.\r
1071           node.style[entry[0]] = '';\r
1072         });\r
1073 \r
1074         applyAnimationClasses(element, options);\r
1075         applyAnimationStyles(element, options);\r
1076 \r
1077         // the reason why we have this option is to allow a synchronous closing callback\r
1078         // that is fired as SOON as the animation ends (when the CSS is removed) or if\r
1079         // the animation never takes off at all. A good example is a leave animation since\r
1080         // the element must be removed just after the animation is over or else the element\r
1081         // will appear on screen for one animation frame causing an overbearing flicker.\r
1082         if (options.onDone) {\r
1083           options.onDone();\r
1084         }\r
1085 \r
1086         // if the preparation function fails then the promise is not setup\r
1087         if (runner) {\r
1088           runner.complete(!rejected);\r
1089         }\r
1090       }\r
1091 \r
1092       function applyBlocking(duration) {\r
1093         if (flags.blockTransition) {\r
1094           blockTransitions(node, duration);\r
1095         }\r
1096 \r
1097         if (flags.blockKeyframeAnimation) {\r
1098           blockKeyframeAnimations(node, !!duration);\r
1099         }\r
1100       }\r
1101 \r
1102       function closeAndReturnNoopAnimator() {\r
1103         runner = new $$AnimateRunner({\r
1104           end: endFn,\r
1105           cancel: cancelFn\r
1106         });\r
1107 \r
1108         close();\r
1109 \r
1110         return {\r
1111           $$willAnimate: false,\r
1112           start: function() {\r
1113             return runner;\r
1114           },\r
1115           end: endFn\r
1116         };\r
1117       }\r
1118 \r
1119       function start() {\r
1120         if (animationClosed) return;\r
1121         if (!node.parentNode) {\r
1122           close();\r
1123           return;\r
1124         }\r
1125 \r
1126         var startTime, events = [];\r
1127 \r
1128         // even though we only pause keyframe animations here the pause flag\r
1129         // will still happen when transitions are used. Only the transition will\r
1130         // not be paused since that is not possible. If the animation ends when\r
1131         // paused then it will not complete until unpaused or cancelled.\r
1132         var playPause = function(playAnimation) {\r
1133           if (!animationCompleted) {\r
1134             animationPaused = !playAnimation;\r
1135             if (timings.animationDuration) {\r
1136               var value = blockKeyframeAnimations(node, animationPaused);\r
1137               animationPaused\r
1138                   ? temporaryStyles.push(value)\r
1139                   : removeFromArray(temporaryStyles, value);\r
1140             }\r
1141           } else if (animationPaused && playAnimation) {\r
1142             animationPaused = false;\r
1143             close();\r
1144           }\r
1145         };\r
1146 \r
1147         // checking the stagger duration prevents an accidently cascade of the CSS delay style\r
1148         // being inherited from the parent. If the transition duration is zero then we can safely\r
1149         // rely that the delay value is an intential stagger delay style.\r
1150         var maxStagger = itemIndex > 0\r
1151                          && ((timings.transitionDuration && stagger.transitionDuration === 0) ||\r
1152                             (timings.animationDuration && stagger.animationDuration === 0))\r
1153                          && Math.max(stagger.animationDelay, stagger.transitionDelay);\r
1154         if (maxStagger) {\r
1155           $timeout(triggerAnimationStart,\r
1156                    Math.floor(maxStagger * itemIndex * ONE_SECOND),\r
1157                    false);\r
1158         } else {\r
1159           triggerAnimationStart();\r
1160         }\r
1161 \r
1162         // this will decorate the existing promise runner with pause/resume methods\r
1163         runnerHost.resume = function() {\r
1164           playPause(true);\r
1165         };\r
1166 \r
1167         runnerHost.pause = function() {\r
1168           playPause(false);\r
1169         };\r
1170 \r
1171         function triggerAnimationStart() {\r
1172           // just incase a stagger animation kicks in when the animation\r
1173           // itself was cancelled entirely\r
1174           if (animationClosed) return;\r
1175 \r
1176           applyBlocking(false);\r
1177 \r
1178           forEach(temporaryStyles, function(entry) {\r
1179             var key = entry[0];\r
1180             var value = entry[1];\r
1181             node.style[key] = value;\r
1182           });\r
1183 \r
1184           applyAnimationClasses(element, options);\r
1185           $$jqLite.addClass(element, activeClasses);\r
1186 \r
1187           if (flags.recalculateTimingStyles) {\r
1188             fullClassName = node.className + ' ' + setupClasses;\r
1189             cacheKey = gcsHashFn(node, fullClassName);\r
1190 \r
1191             timings = computeTimings(node, fullClassName, cacheKey);\r
1192             relativeDelay = timings.maxDelay;\r
1193             maxDelay = Math.max(relativeDelay, 0);\r
1194             maxDuration = timings.maxDuration;\r
1195 \r
1196             if (maxDuration === 0) {\r
1197               close();\r
1198               return;\r
1199             }\r
1200 \r
1201             flags.hasTransitions = timings.transitionDuration > 0;\r
1202             flags.hasAnimations = timings.animationDuration > 0;\r
1203           }\r
1204 \r
1205           if (flags.applyTransitionDelay || flags.applyAnimationDelay) {\r
1206             relativeDelay = typeof options.delay !== "boolean" && truthyTimingValue(options.delay)\r
1207                   ? parseFloat(options.delay)\r
1208                   : relativeDelay;\r
1209 \r
1210             maxDelay = Math.max(relativeDelay, 0);\r
1211 \r
1212             var delayStyle;\r
1213             if (flags.applyTransitionDelay) {\r
1214               timings.transitionDelay = relativeDelay;\r
1215               delayStyle = getCssDelayStyle(relativeDelay);\r
1216               temporaryStyles.push(delayStyle);\r
1217               node.style[delayStyle[0]] = delayStyle[1];\r
1218             }\r
1219 \r
1220             if (flags.applyAnimationDelay) {\r
1221               timings.animationDelay = relativeDelay;\r
1222               delayStyle = getCssDelayStyle(relativeDelay, true);\r
1223               temporaryStyles.push(delayStyle);\r
1224               node.style[delayStyle[0]] = delayStyle[1];\r
1225             }\r
1226           }\r
1227 \r
1228           maxDelayTime = maxDelay * ONE_SECOND;\r
1229           maxDurationTime = maxDuration * ONE_SECOND;\r
1230 \r
1231           if (options.easing) {\r
1232             var easeProp, easeVal = options.easing;\r
1233             if (flags.hasTransitions) {\r
1234               easeProp = TRANSITION_PROP + TIMING_KEY;\r
1235               temporaryStyles.push([easeProp, easeVal]);\r
1236               node.style[easeProp] = easeVal;\r
1237             }\r
1238             if (flags.hasAnimations) {\r
1239               easeProp = ANIMATION_PROP + TIMING_KEY;\r
1240               temporaryStyles.push([easeProp, easeVal]);\r
1241               node.style[easeProp] = easeVal;\r
1242             }\r
1243           }\r
1244 \r
1245           if (timings.transitionDuration) {\r
1246             events.push(TRANSITIONEND_EVENT);\r
1247           }\r
1248 \r
1249           if (timings.animationDuration) {\r
1250             events.push(ANIMATIONEND_EVENT);\r
1251           }\r
1252 \r
1253           startTime = Date.now();\r
1254           element.on(events.join(' '), onAnimationProgress);\r
1255           $timeout(onAnimationExpired, maxDelayTime + CLOSING_TIME_BUFFER * maxDurationTime);\r
1256 \r
1257           applyAnimationToStyles(element, options);\r
1258         }\r
1259 \r
1260         function onAnimationExpired() {\r
1261           // although an expired animation is a failed animation, getting to\r
1262           // this outcome is very easy if the CSS code screws up. Therefore we\r
1263           // should still continue normally as if the animation completed correctly.\r
1264           close();\r
1265         }\r
1266 \r
1267         function onAnimationProgress(event) {\r
1268           event.stopPropagation();\r
1269           var ev = event.originalEvent || event;\r
1270           var timeStamp = ev.$manualTimeStamp || ev.timeStamp || Date.now();\r
1271 \r
1272           /* Firefox (or possibly just Gecko) likes to not round values up\r
1273            * when a ms measurement is used for the animation */\r
1274           var elapsedTime = parseFloat(ev.elapsedTime.toFixed(ELAPSED_TIME_MAX_DECIMAL_PLACES));\r
1275 \r
1276           /* $manualTimeStamp is a mocked timeStamp value which is set\r
1277            * within browserTrigger(). This is only here so that tests can\r
1278            * mock animations properly. Real events fallback to event.timeStamp,\r
1279            * or, if they don't, then a timeStamp is automatically created for them.\r
1280            * We're checking to see if the timeStamp surpasses the expected delay,\r
1281            * but we're using elapsedTime instead of the timeStamp on the 2nd\r
1282            * pre-condition since animations sometimes close off early */\r
1283           if (Math.max(timeStamp - startTime, 0) >= maxDelayTime && elapsedTime >= maxDuration) {\r
1284             // we set this flag to ensure that if the transition is paused then, when resumed,\r
1285             // the animation will automatically close itself since transitions cannot be paused.\r
1286             animationCompleted = true;\r
1287             close();\r
1288           }\r
1289         }\r
1290       }\r
1291     }\r
1292   }];\r
1293 }];\r
1294 \r
1295 var $$AnimateCssDriverProvider = ['$$animationProvider', function($$animationProvider) {\r
1296   $$animationProvider.drivers.push('$$animateCssDriver');\r
1297 \r
1298   var NG_ANIMATE_SHIM_CLASS_NAME = 'ng-animate-shim';\r
1299   var NG_ANIMATE_ANCHOR_CLASS_NAME = 'ng-anchor';\r
1300 \r
1301   var NG_OUT_ANCHOR_CLASS_NAME = 'ng-anchor-out';\r
1302   var NG_IN_ANCHOR_CLASS_NAME = 'ng-anchor-in';\r
1303 \r
1304   this.$get = ['$animateCss', '$rootScope', '$$AnimateRunner', '$rootElement', '$document', '$sniffer',\r
1305        function($animateCss,   $rootScope,   $$AnimateRunner,   $rootElement,   $document,   $sniffer) {\r
1306 \r
1307     // only browsers that support these properties can render animations\r
1308     if (!$sniffer.animations && !$sniffer.transitions) return noop;\r
1309 \r
1310     var bodyNode = getDomNode($document).body;\r
1311     var rootNode = getDomNode($rootElement);\r
1312 \r
1313     var rootBodyElement = jqLite(bodyNode.parentNode === rootNode ? bodyNode : rootNode);\r
1314 \r
1315     return function initDriverFn(animationDetails) {\r
1316       return animationDetails.from && animationDetails.to\r
1317           ? prepareFromToAnchorAnimation(animationDetails.from,\r
1318                                          animationDetails.to,\r
1319                                          animationDetails.classes,\r
1320                                          animationDetails.anchors)\r
1321           : prepareRegularAnimation(animationDetails);\r
1322     };\r
1323 \r
1324     function filterCssClasses(classes) {\r
1325       //remove all the `ng-` stuff\r
1326       return classes.replace(/\bng-\S+\b/g, '');\r
1327     }\r
1328 \r
1329     function getUniqueValues(a, b) {\r
1330       if (isString(a)) a = a.split(' ');\r
1331       if (isString(b)) b = b.split(' ');\r
1332       return a.filter(function(val) {\r
1333         return b.indexOf(val) === -1;\r
1334       }).join(' ');\r
1335     }\r
1336 \r
1337     function prepareAnchoredAnimation(classes, outAnchor, inAnchor) {\r
1338       var clone = jqLite(getDomNode(outAnchor).cloneNode(true));\r
1339       var startingClasses = filterCssClasses(getClassVal(clone));\r
1340 \r
1341       outAnchor.addClass(NG_ANIMATE_SHIM_CLASS_NAME);\r
1342       inAnchor.addClass(NG_ANIMATE_SHIM_CLASS_NAME);\r
1343 \r
1344       clone.addClass(NG_ANIMATE_ANCHOR_CLASS_NAME);\r
1345 \r
1346       rootBodyElement.append(clone);\r
1347 \r
1348       var animatorIn, animatorOut = prepareOutAnimation();\r
1349 \r
1350       // the user may not end up using the `out` animation and\r
1351       // only making use of the `in` animation or vice-versa.\r
1352       // In either case we should allow this and not assume the\r
1353       // animation is over unless both animations are not used.\r
1354       if (!animatorOut) {\r
1355         animatorIn = prepareInAnimation();\r
1356         if (!animatorIn) {\r
1357           return end();\r
1358         }\r
1359       }\r
1360 \r
1361       var startingAnimator = animatorOut || animatorIn;\r
1362 \r
1363       return {\r
1364         start: function() {\r
1365           var runner;\r
1366 \r
1367           var currentAnimation = startingAnimator.start();\r
1368           currentAnimation.done(function() {\r
1369             currentAnimation = null;\r
1370             if (!animatorIn) {\r
1371               animatorIn = prepareInAnimation();\r
1372               if (animatorIn) {\r
1373                 currentAnimation = animatorIn.start();\r
1374                 currentAnimation.done(function() {\r
1375                   currentAnimation = null;\r
1376                   end();\r
1377                   runner.complete();\r
1378                 });\r
1379                 return currentAnimation;\r
1380               }\r
1381             }\r
1382             // in the event that there is no `in` animation\r
1383             end();\r
1384             runner.complete();\r
1385           });\r
1386 \r
1387           runner = new $$AnimateRunner({\r
1388             end: endFn,\r
1389             cancel: endFn\r
1390           });\r
1391 \r
1392           return runner;\r
1393 \r
1394           function endFn() {\r
1395             if (currentAnimation) {\r
1396               currentAnimation.end();\r
1397             }\r
1398           }\r
1399         }\r
1400       };\r
1401 \r
1402       function calculateAnchorStyles(anchor) {\r
1403         var styles = {};\r
1404 \r
1405         var coords = getDomNode(anchor).getBoundingClientRect();\r
1406 \r
1407         // we iterate directly since safari messes up and doesn't return\r
1408         // all the keys for the coods object when iterated\r
1409         forEach(['width','height','top','left'], function(key) {\r
1410           var value = coords[key];\r
1411           switch (key) {\r
1412             case 'top':\r
1413               value += bodyNode.scrollTop;\r
1414               break;\r
1415             case 'left':\r
1416               value += bodyNode.scrollLeft;\r
1417               break;\r
1418           }\r
1419           styles[key] = Math.floor(value) + 'px';\r
1420         });\r
1421         return styles;\r
1422       }\r
1423 \r
1424       function prepareOutAnimation() {\r
1425         var animator = $animateCss(clone, {\r
1426           addClass: NG_OUT_ANCHOR_CLASS_NAME,\r
1427           delay: true,\r
1428           from: calculateAnchorStyles(outAnchor)\r
1429         });\r
1430 \r
1431         // read the comment within `prepareRegularAnimation` to understand\r
1432         // why this check is necessary\r
1433         return animator.$$willAnimate ? animator : null;\r
1434       }\r
1435 \r
1436       function getClassVal(element) {\r
1437         return element.attr('class') || '';\r
1438       }\r
1439 \r
1440       function prepareInAnimation() {\r
1441         var endingClasses = filterCssClasses(getClassVal(inAnchor));\r
1442         var toAdd = getUniqueValues(endingClasses, startingClasses);\r
1443         var toRemove = getUniqueValues(startingClasses, endingClasses);\r
1444 \r
1445         var animator = $animateCss(clone, {\r
1446           to: calculateAnchorStyles(inAnchor),\r
1447           addClass: NG_IN_ANCHOR_CLASS_NAME + ' ' + toAdd,\r
1448           removeClass: NG_OUT_ANCHOR_CLASS_NAME + ' ' + toRemove,\r
1449           delay: true\r
1450         });\r
1451 \r
1452         // read the comment within `prepareRegularAnimation` to understand\r
1453         // why this check is necessary\r
1454         return animator.$$willAnimate ? animator : null;\r
1455       }\r
1456 \r
1457       function end() {\r
1458         clone.remove();\r
1459         outAnchor.removeClass(NG_ANIMATE_SHIM_CLASS_NAME);\r
1460         inAnchor.removeClass(NG_ANIMATE_SHIM_CLASS_NAME);\r
1461       }\r
1462     }\r
1463 \r
1464     function prepareFromToAnchorAnimation(from, to, classes, anchors) {\r
1465       var fromAnimation = prepareRegularAnimation(from);\r
1466       var toAnimation = prepareRegularAnimation(to);\r
1467 \r
1468       var anchorAnimations = [];\r
1469       forEach(anchors, function(anchor) {\r
1470         var outElement = anchor['out'];\r
1471         var inElement = anchor['in'];\r
1472         var animator = prepareAnchoredAnimation(classes, outElement, inElement);\r
1473         if (animator) {\r
1474           anchorAnimations.push(animator);\r
1475         }\r
1476       });\r
1477 \r
1478       // no point in doing anything when there are no elements to animate\r
1479       if (!fromAnimation && !toAnimation && anchorAnimations.length === 0) return;\r
1480 \r
1481       return {\r
1482         start: function() {\r
1483           var animationRunners = [];\r
1484 \r
1485           if (fromAnimation) {\r
1486             animationRunners.push(fromAnimation.start());\r
1487           }\r
1488 \r
1489           if (toAnimation) {\r
1490             animationRunners.push(toAnimation.start());\r
1491           }\r
1492 \r
1493           forEach(anchorAnimations, function(animation) {\r
1494             animationRunners.push(animation.start());\r
1495           });\r
1496 \r
1497           var runner = new $$AnimateRunner({\r
1498             end: endFn,\r
1499             cancel: endFn // CSS-driven animations cannot be cancelled, only ended\r
1500           });\r
1501 \r
1502           $$AnimateRunner.all(animationRunners, function(status) {\r
1503             runner.complete(status);\r
1504           });\r
1505 \r
1506           return runner;\r
1507 \r
1508           function endFn() {\r
1509             forEach(animationRunners, function(runner) {\r
1510               runner.end();\r
1511             });\r
1512           }\r
1513         }\r
1514       };\r
1515     }\r
1516 \r
1517     function prepareRegularAnimation(animationDetails) {\r
1518       var element = animationDetails.element;\r
1519       var options = animationDetails.options || {};\r
1520 \r
1521       if (animationDetails.structural) {\r
1522         // structural animations ensure that the CSS classes are always applied\r
1523         // before the detection starts.\r
1524         options.structural = options.applyClassesEarly = true;\r
1525 \r
1526         // we special case the leave animation since we want to ensure that\r
1527         // the element is removed as soon as the animation is over. Otherwise\r
1528         // a flicker might appear or the element may not be removed at all\r
1529         options.event = animationDetails.event;\r
1530         if (options.event === 'leave') {\r
1531           options.onDone = options.domOperation;\r
1532         }\r
1533       } else {\r
1534         options.event = null;\r
1535       }\r
1536 \r
1537       var animator = $animateCss(element, options);\r
1538 \r
1539       // the driver lookup code inside of $$animation attempts to spawn a\r
1540       // driver one by one until a driver returns a.$$willAnimate animator object.\r
1541       // $animateCss will always return an object, however, it will pass in\r
1542       // a flag as a hint as to whether an animation was detected or not\r
1543       return animator.$$willAnimate ? animator : null;\r
1544     }\r
1545   }];\r
1546 }];\r
1547 \r
1548 // TODO(matsko): use caching here to speed things up for detection\r
1549 // TODO(matsko): add documentation\r
1550 //  by the time...\r
1551 \r
1552 var $$AnimateJsProvider = ['$animateProvider', function($animateProvider) {\r
1553   this.$get = ['$injector', '$$AnimateRunner', '$$rAFMutex', '$$jqLite',\r
1554        function($injector,   $$AnimateRunner,   $$rAFMutex,   $$jqLite) {\r
1555 \r
1556     var applyAnimationClasses = applyAnimationClassesFactory($$jqLite);\r
1557          // $animateJs(element, 'enter');\r
1558     return function(element, event, classes, options) {\r
1559       // the `classes` argument is optional and if it is not used\r
1560       // then the classes will be resolved from the element's className\r
1561       // property as well as options.addClass/options.removeClass.\r
1562       if (arguments.length === 3 && isObject(classes)) {\r
1563         options = classes;\r
1564         classes = null;\r
1565       }\r
1566 \r
1567       options = prepareAnimationOptions(options);\r
1568       if (!classes) {\r
1569         classes = element.attr('class') || '';\r
1570         if (options.addClass) {\r
1571           classes += ' ' + options.addClass;\r
1572         }\r
1573         if (options.removeClass) {\r
1574           classes += ' ' + options.removeClass;\r
1575         }\r
1576       }\r
1577 \r
1578       var classesToAdd = options.addClass;\r
1579       var classesToRemove = options.removeClass;\r
1580 \r
1581       // the lookupAnimations function returns a series of animation objects that are\r
1582       // matched up with one or more of the CSS classes. These animation objects are\r
1583       // defined via the module.animation factory function. If nothing is detected then\r
1584       // we don't return anything which then makes $animation query the next driver.\r
1585       var animations = lookupAnimations(classes);\r
1586       var before, after;\r
1587       if (animations.length) {\r
1588         var afterFn, beforeFn;\r
1589         if (event == 'leave') {\r
1590           beforeFn = 'leave';\r
1591           afterFn = 'afterLeave'; // TODO(matsko): get rid of this\r
1592         } else {\r
1593           beforeFn = 'before' + event.charAt(0).toUpperCase() + event.substr(1);\r
1594           afterFn = event;\r
1595         }\r
1596 \r
1597         if (event !== 'enter' && event !== 'move') {\r
1598           before = packageAnimations(element, event, options, animations, beforeFn);\r
1599         }\r
1600         after  = packageAnimations(element, event, options, animations, afterFn);\r
1601       }\r
1602 \r
1603       // no matching animations\r
1604       if (!before && !after) return;\r
1605 \r
1606       function applyOptions() {\r
1607         options.domOperation();\r
1608         applyAnimationClasses(element, options);\r
1609       }\r
1610 \r
1611       return {\r
1612         start: function() {\r
1613           var closeActiveAnimations;\r
1614           var chain = [];\r
1615 \r
1616           if (before) {\r
1617             chain.push(function(fn) {\r
1618               closeActiveAnimations = before(fn);\r
1619             });\r
1620           }\r
1621 \r
1622           if (chain.length) {\r
1623             chain.push(function(fn) {\r
1624               applyOptions();\r
1625               fn(true);\r
1626             });\r
1627           } else {\r
1628             applyOptions();\r
1629           }\r
1630 \r
1631           if (after) {\r
1632             chain.push(function(fn) {\r
1633               closeActiveAnimations = after(fn);\r
1634             });\r
1635           }\r
1636 \r
1637           var animationClosed = false;\r
1638           var runner = new $$AnimateRunner({\r
1639             end: function() {\r
1640               endAnimations();\r
1641             },\r
1642             cancel: function() {\r
1643               endAnimations(true);\r
1644             }\r
1645           });\r
1646 \r
1647           $$AnimateRunner.chain(chain, onComplete);\r
1648           return runner;\r
1649 \r
1650           function onComplete(success) {\r
1651             animationClosed = true;\r
1652             applyOptions();\r
1653             applyAnimationStyles(element, options);\r
1654             runner.complete(success);\r
1655           }\r
1656 \r
1657           function endAnimations(cancelled) {\r
1658             if (!animationClosed) {\r
1659               (closeActiveAnimations || noop)(cancelled);\r
1660               onComplete(cancelled);\r
1661             }\r
1662           }\r
1663         }\r
1664       };\r
1665 \r
1666       function executeAnimationFn(fn, element, event, options, onDone) {\r
1667         var args;\r
1668         switch (event) {\r
1669           case 'animate':\r
1670             args = [element, options.from, options.to, onDone];\r
1671             break;\r
1672 \r
1673           case 'setClass':\r
1674             args = [element, classesToAdd, classesToRemove, onDone];\r
1675             break;\r
1676 \r
1677           case 'addClass':\r
1678             args = [element, classesToAdd, onDone];\r
1679             break;\r
1680 \r
1681           case 'removeClass':\r
1682             args = [element, classesToRemove, onDone];\r
1683             break;\r
1684 \r
1685           default:\r
1686             args = [element, onDone];\r
1687             break;\r
1688         }\r
1689 \r
1690         args.push(options);\r
1691 \r
1692         var value = fn.apply(fn, args);\r
1693         if (value) {\r
1694           if (isFunction(value.start)) {\r
1695             value = value.start();\r
1696           }\r
1697 \r
1698           if (value instanceof $$AnimateRunner) {\r
1699             value.done(onDone);\r
1700           } else if (isFunction(value)) {\r
1701             // optional onEnd / onCancel callback\r
1702             return value;\r
1703           }\r
1704         }\r
1705 \r
1706         return noop;\r
1707       }\r
1708 \r
1709       function groupEventedAnimations(element, event, options, animations, fnName) {\r
1710         var operations = [];\r
1711         forEach(animations, function(ani) {\r
1712           var animation = ani[fnName];\r
1713           if (!animation) return;\r
1714 \r
1715           // note that all of these animations will run in parallel\r
1716           operations.push(function() {\r
1717             var runner;\r
1718             var endProgressCb;\r
1719 \r
1720             var resolved = false;\r
1721             var onAnimationComplete = function(rejected) {\r
1722               if (!resolved) {\r
1723                 resolved = true;\r
1724                 (endProgressCb || noop)(rejected);\r
1725                 runner.complete(!rejected);\r
1726               }\r
1727             };\r
1728 \r
1729             runner = new $$AnimateRunner({\r
1730               end: function() {\r
1731                 onAnimationComplete();\r
1732               },\r
1733               cancel: function() {\r
1734                 onAnimationComplete(true);\r
1735               }\r
1736             });\r
1737 \r
1738             endProgressCb = executeAnimationFn(animation, element, event, options, function(result) {\r
1739               var cancelled = result === false;\r
1740               onAnimationComplete(cancelled);\r
1741             });\r
1742 \r
1743             return runner;\r
1744           });\r
1745         });\r
1746 \r
1747         return operations;\r
1748       }\r
1749 \r
1750       function packageAnimations(element, event, options, animations, fnName) {\r
1751         var operations = groupEventedAnimations(element, event, options, animations, fnName);\r
1752         if (operations.length === 0) {\r
1753           var a,b;\r
1754           if (fnName === 'beforeSetClass') {\r
1755             a = groupEventedAnimations(element, 'removeClass', options, animations, 'beforeRemoveClass');\r
1756             b = groupEventedAnimations(element, 'addClass', options, animations, 'beforeAddClass');\r
1757           } else if (fnName === 'setClass') {\r
1758             a = groupEventedAnimations(element, 'removeClass', options, animations, 'removeClass');\r
1759             b = groupEventedAnimations(element, 'addClass', options, animations, 'addClass');\r
1760           }\r
1761 \r
1762           if (a) {\r
1763             operations = operations.concat(a);\r
1764           }\r
1765           if (b) {\r
1766             operations = operations.concat(b);\r
1767           }\r
1768         }\r
1769 \r
1770         if (operations.length === 0) return;\r
1771 \r
1772         // TODO(matsko): add documentation\r
1773         return function startAnimation(callback) {\r
1774           var runners = [];\r
1775           if (operations.length) {\r
1776             forEach(operations, function(animateFn) {\r
1777               runners.push(animateFn());\r
1778             });\r
1779           }\r
1780 \r
1781           runners.length ? $$AnimateRunner.all(runners, callback) : callback();\r
1782 \r
1783           return function endFn(reject) {\r
1784             forEach(runners, function(runner) {\r
1785               reject ? runner.cancel() : runner.end();\r
1786             });\r
1787           };\r
1788         };\r
1789       }\r
1790     };\r
1791 \r
1792     function lookupAnimations(classes) {\r
1793       classes = isArray(classes) ? classes : classes.split(' ');\r
1794       var matches = [], flagMap = {};\r
1795       for (var i=0; i < classes.length; i++) {\r
1796         var klass = classes[i],\r
1797             animationFactory = $animateProvider.$$registeredAnimations[klass];\r
1798         if (animationFactory && !flagMap[klass]) {\r
1799           matches.push($injector.get(animationFactory));\r
1800           flagMap[klass] = true;\r
1801         }\r
1802       }\r
1803       return matches;\r
1804     }\r
1805   }];\r
1806 }];\r
1807 \r
1808 var $$AnimateJsDriverProvider = ['$$animationProvider', function($$animationProvider) {\r
1809   $$animationProvider.drivers.push('$$animateJsDriver');\r
1810   this.$get = ['$$animateJs', '$$AnimateRunner', function($$animateJs, $$AnimateRunner) {\r
1811     return function initDriverFn(animationDetails) {\r
1812       if (animationDetails.from && animationDetails.to) {\r
1813         var fromAnimation = prepareAnimation(animationDetails.from);\r
1814         var toAnimation = prepareAnimation(animationDetails.to);\r
1815         if (!fromAnimation && !toAnimation) return;\r
1816 \r
1817         return {\r
1818           start: function() {\r
1819             var animationRunners = [];\r
1820 \r
1821             if (fromAnimation) {\r
1822               animationRunners.push(fromAnimation.start());\r
1823             }\r
1824 \r
1825             if (toAnimation) {\r
1826               animationRunners.push(toAnimation.start());\r
1827             }\r
1828 \r
1829             $$AnimateRunner.all(animationRunners, done);\r
1830 \r
1831             var runner = new $$AnimateRunner({\r
1832               end: endFnFactory(),\r
1833               cancel: endFnFactory()\r
1834             });\r
1835 \r
1836             return runner;\r
1837 \r
1838             function endFnFactory() {\r
1839               return function() {\r
1840                 forEach(animationRunners, function(runner) {\r
1841                   // at this point we cannot cancel animations for groups just yet. 1.5+\r
1842                   runner.end();\r
1843                 });\r
1844               };\r
1845             }\r
1846 \r
1847             function done(status) {\r
1848               runner.complete(status);\r
1849             }\r
1850           }\r
1851         };\r
1852       } else {\r
1853         return prepareAnimation(animationDetails);\r
1854       }\r
1855     };\r
1856 \r
1857     function prepareAnimation(animationDetails) {\r
1858       // TODO(matsko): make sure to check for grouped animations and delegate down to normal animations\r
1859       var element = animationDetails.element;\r
1860       var event = animationDetails.event;\r
1861       var options = animationDetails.options;\r
1862       var classes = animationDetails.classes;\r
1863       return $$animateJs(element, event, classes, options);\r
1864     }\r
1865   }];\r
1866 }];\r
1867 \r
1868 var NG_ANIMATE_ATTR_NAME = 'data-ng-animate';\r
1869 var NG_ANIMATE_PIN_DATA = '$ngAnimatePin';\r
1870 var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {\r
1871   var PRE_DIGEST_STATE = 1;\r
1872   var RUNNING_STATE = 2;\r
1873 \r
1874   var rules = this.rules = {\r
1875     skip: [],\r
1876     cancel: [],\r
1877     join: []\r
1878   };\r
1879 \r
1880   function isAllowed(ruleType, element, currentAnimation, previousAnimation) {\r
1881     return rules[ruleType].some(function(fn) {\r
1882       return fn(element, currentAnimation, previousAnimation);\r
1883     });\r
1884   }\r
1885 \r
1886   function hasAnimationClasses(options, and) {\r
1887     options = options || {};\r
1888     var a = (options.addClass || '').length > 0;\r
1889     var b = (options.removeClass || '').length > 0;\r
1890     return and ? a && b : a || b;\r
1891   }\r
1892 \r
1893   rules.join.push(function(element, newAnimation, currentAnimation) {\r
1894     // if the new animation is class-based then we can just tack that on\r
1895     return !newAnimation.structural && hasAnimationClasses(newAnimation.options);\r
1896   });\r
1897 \r
1898   rules.skip.push(function(element, newAnimation, currentAnimation) {\r
1899     // there is no need to animate anything if no classes are being added and\r
1900     // there is no structural animation that will be triggered\r
1901     return !newAnimation.structural && !hasAnimationClasses(newAnimation.options);\r
1902   });\r
1903 \r
1904   rules.skip.push(function(element, newAnimation, currentAnimation) {\r
1905     // why should we trigger a new structural animation if the element will\r
1906     // be removed from the DOM anyway?\r
1907     return currentAnimation.event == 'leave' && newAnimation.structural;\r
1908   });\r
1909 \r
1910   rules.skip.push(function(element, newAnimation, currentAnimation) {\r
1911     // if there is a current animation then skip the class-based animation\r
1912     return currentAnimation.structural && !newAnimation.structural;\r
1913   });\r
1914 \r
1915   rules.cancel.push(function(element, newAnimation, currentAnimation) {\r
1916     // there can never be two structural animations running at the same time\r
1917     return currentAnimation.structural && newAnimation.structural;\r
1918   });\r
1919 \r
1920   rules.cancel.push(function(element, newAnimation, currentAnimation) {\r
1921     // if the previous animation is already running, but the new animation will\r
1922     // be triggered, but the new animation is structural\r
1923     return currentAnimation.state === RUNNING_STATE && newAnimation.structural;\r
1924   });\r
1925 \r
1926   rules.cancel.push(function(element, newAnimation, currentAnimation) {\r
1927     var nO = newAnimation.options;\r
1928     var cO = currentAnimation.options;\r
1929 \r
1930     // if the exact same CSS class is added/removed then it's safe to cancel it\r
1931     return (nO.addClass && nO.addClass === cO.removeClass) || (nO.removeClass && nO.removeClass === cO.addClass);\r
1932   });\r
1933 \r
1934   this.$get = ['$$rAF', '$rootScope', '$rootElement', '$document', '$$HashMap',\r
1935                '$$animation', '$$AnimateRunner', '$templateRequest', '$$jqLite',\r
1936        function($$rAF,   $rootScope,   $rootElement,   $document,   $$HashMap,\r
1937                 $$animation,   $$AnimateRunner,   $templateRequest,   $$jqLite) {\r
1938 \r
1939     var activeAnimationsLookup = new $$HashMap();\r
1940     var disabledElementsLookup = new $$HashMap();\r
1941 \r
1942     var animationsEnabled = null;\r
1943 \r
1944     // Wait until all directive and route-related templates are downloaded and\r
1945     // compiled. The $templateRequest.totalPendingRequests variable keeps track of\r
1946     // all of the remote templates being currently downloaded. If there are no\r
1947     // templates currently downloading then the watcher will still fire anyway.\r
1948     var deregisterWatch = $rootScope.$watch(\r
1949       function() { return $templateRequest.totalPendingRequests === 0; },\r
1950       function(isEmpty) {\r
1951         if (!isEmpty) return;\r
1952         deregisterWatch();\r
1953 \r
1954         // Now that all templates have been downloaded, $animate will wait until\r
1955         // the post digest queue is empty before enabling animations. By having two\r
1956         // calls to $postDigest calls we can ensure that the flag is enabled at the\r
1957         // very end of the post digest queue. Since all of the animations in $animate\r
1958         // use $postDigest, it's important that the code below executes at the end.\r
1959         // This basically means that the page is fully downloaded and compiled before\r
1960         // any animations are triggered.\r
1961         $rootScope.$$postDigest(function() {\r
1962           $rootScope.$$postDigest(function() {\r
1963             // we check for null directly in the event that the application already called\r
1964             // .enabled() with whatever arguments that it provided it with\r
1965             if (animationsEnabled === null) {\r
1966               animationsEnabled = true;\r
1967             }\r
1968           });\r
1969         });\r
1970       }\r
1971     );\r
1972 \r
1973     var bodyElement = jqLite($document[0].body);\r
1974 \r
1975     var callbackRegistry = {};\r
1976 \r
1977     // remember that the classNameFilter is set during the provider/config\r
1978     // stage therefore we can optimize here and setup a helper function\r
1979     var classNameFilter = $animateProvider.classNameFilter();\r
1980     var isAnimatableClassName = !classNameFilter\r
1981               ? function() { return true; }\r
1982               : function(className) {\r
1983                 return classNameFilter.test(className);\r
1984               };\r
1985 \r
1986     var applyAnimationClasses = applyAnimationClassesFactory($$jqLite);\r
1987 \r
1988     function normalizeAnimationOptions(element, options) {\r
1989       return mergeAnimationOptions(element, options, {});\r
1990     }\r
1991 \r
1992     function findCallbacks(element, event) {\r
1993       var targetNode = getDomNode(element);\r
1994 \r
1995       var matches = [];\r
1996       var entries = callbackRegistry[event];\r
1997       if (entries) {\r
1998         forEach(entries, function(entry) {\r
1999           if (entry.node.contains(targetNode)) {\r
2000             matches.push(entry.callback);\r
2001           }\r
2002         });\r
2003       }\r
2004 \r
2005       return matches;\r
2006     }\r
2007 \r
2008     function triggerCallback(event, element, phase, data) {\r
2009       $$rAF(function() {\r
2010         forEach(findCallbacks(element, event), function(callback) {\r
2011           callback(element, phase, data);\r
2012         });\r
2013       });\r
2014     }\r
2015 \r
2016     return {\r
2017       on: function(event, container, callback) {\r
2018         var node = extractElementNode(container);\r
2019         callbackRegistry[event] = callbackRegistry[event] || [];\r
2020         callbackRegistry[event].push({\r
2021           node: node,\r
2022           callback: callback\r
2023         });\r
2024       },\r
2025 \r
2026       off: function(event, container, callback) {\r
2027         var entries = callbackRegistry[event];\r
2028         if (!entries) return;\r
2029 \r
2030         callbackRegistry[event] = arguments.length === 1\r
2031             ? null\r
2032             : filterFromRegistry(entries, container, callback);\r
2033 \r
2034         function filterFromRegistry(list, matchContainer, matchCallback) {\r
2035           var containerNode = extractElementNode(matchContainer);\r
2036           return list.filter(function(entry) {\r
2037             var isMatch = entry.node === containerNode &&\r
2038                             (!matchCallback || entry.callback === matchCallback);\r
2039             return !isMatch;\r
2040           });\r
2041         }\r
2042       },\r
2043 \r
2044       pin: function(element, parentElement) {\r
2045         assertArg(isElement(element), 'element', 'not an element');\r
2046         assertArg(isElement(parentElement), 'parentElement', 'not an element');\r
2047         element.data(NG_ANIMATE_PIN_DATA, parentElement);\r
2048       },\r
2049 \r
2050       push: function(element, event, options, domOperation) {\r
2051         options = options || {};\r
2052         options.domOperation = domOperation;\r
2053         return queueAnimation(element, event, options);\r
2054       },\r
2055 \r
2056       // this method has four signatures:\r
2057       //  () - global getter\r
2058       //  (bool) - global setter\r
2059       //  (element) - element getter\r
2060       //  (element, bool) - element setter<F37>\r
2061       enabled: function(element, bool) {\r
2062         var argCount = arguments.length;\r
2063 \r
2064         if (argCount === 0) {\r
2065           // () - Global getter\r
2066           bool = !!animationsEnabled;\r
2067         } else {\r
2068           var hasElement = isElement(element);\r
2069 \r
2070           if (!hasElement) {\r
2071             // (bool) - Global setter\r
2072             bool = animationsEnabled = !!element;\r
2073           } else {\r
2074             var node = getDomNode(element);\r
2075             var recordExists = disabledElementsLookup.get(node);\r
2076 \r
2077             if (argCount === 1) {\r
2078               // (element) - Element getter\r
2079               bool = !recordExists;\r
2080             } else {\r
2081               // (element, bool) - Element setter\r
2082               bool = !!bool;\r
2083               if (!bool) {\r
2084                 disabledElementsLookup.put(node, true);\r
2085               } else if (recordExists) {\r
2086                 disabledElementsLookup.remove(node);\r
2087               }\r
2088             }\r
2089           }\r
2090         }\r
2091 \r
2092         return bool;\r
2093       }\r
2094     };\r
2095 \r
2096     function queueAnimation(element, event, options) {\r
2097       var node, parent;\r
2098       element = stripCommentsFromElement(element);\r
2099       if (element) {\r
2100         node = getDomNode(element);\r
2101         parent = element.parent();\r
2102       }\r
2103 \r
2104       options = prepareAnimationOptions(options);\r
2105 \r
2106       // we create a fake runner with a working promise.\r
2107       // These methods will become available after the digest has passed\r
2108       var runner = new $$AnimateRunner();\r
2109 \r
2110       // there are situations where a directive issues an animation for\r
2111       // a jqLite wrapper that contains only comment nodes... If this\r
2112       // happens then there is no way we can perform an animation\r
2113       if (!node) {\r
2114         close();\r
2115         return runner;\r
2116       }\r
2117 \r
2118       if (isArray(options.addClass)) {\r
2119         options.addClass = options.addClass.join(' ');\r
2120       }\r
2121 \r
2122       if (isArray(options.removeClass)) {\r
2123         options.removeClass = options.removeClass.join(' ');\r
2124       }\r
2125 \r
2126       if (options.from && !isObject(options.from)) {\r
2127         options.from = null;\r
2128       }\r
2129 \r
2130       if (options.to && !isObject(options.to)) {\r
2131         options.to = null;\r
2132       }\r
2133 \r
2134       var className = [node.className, options.addClass, options.removeClass].join(' ');\r
2135       if (!isAnimatableClassName(className)) {\r
2136         close();\r
2137         return runner;\r
2138       }\r
2139 \r
2140       var isStructural = ['enter', 'move', 'leave'].indexOf(event) >= 0;\r
2141 \r
2142       // this is a hard disable of all animations for the application or on\r
2143       // the element itself, therefore  there is no need to continue further\r
2144       // past this point if not enabled\r
2145       var skipAnimations = !animationsEnabled || disabledElementsLookup.get(node);\r
2146       var existingAnimation = (!skipAnimations && activeAnimationsLookup.get(node)) || {};\r
2147       var hasExistingAnimation = !!existingAnimation.state;\r
2148 \r
2149       // there is no point in traversing the same collection of parent ancestors if a followup\r
2150       // animation will be run on the same element that already did all that checking work\r
2151       if (!skipAnimations && (!hasExistingAnimation || existingAnimation.state != PRE_DIGEST_STATE)) {\r
2152         skipAnimations = !areAnimationsAllowed(element, parent, event);\r
2153       }\r
2154 \r
2155       if (skipAnimations) {\r
2156         close();\r
2157         return runner;\r
2158       }\r
2159 \r
2160       if (isStructural) {\r
2161         closeChildAnimations(element);\r
2162       }\r
2163 \r
2164       var newAnimation = {\r
2165         structural: isStructural,\r
2166         element: element,\r
2167         event: event,\r
2168         close: close,\r
2169         options: options,\r
2170         runner: runner\r
2171       };\r
2172 \r
2173       if (hasExistingAnimation) {\r
2174         var skipAnimationFlag = isAllowed('skip', element, newAnimation, existingAnimation);\r
2175         if (skipAnimationFlag) {\r
2176           if (existingAnimation.state === RUNNING_STATE) {\r
2177             close();\r
2178             return runner;\r
2179           } else {\r
2180             mergeAnimationOptions(element, existingAnimation.options, options);\r
2181             return existingAnimation.runner;\r
2182           }\r
2183         }\r
2184 \r
2185         var cancelAnimationFlag = isAllowed('cancel', element, newAnimation, existingAnimation);\r
2186         if (cancelAnimationFlag) {\r
2187           if (existingAnimation.state === RUNNING_STATE) {\r
2188             // this will end the animation right away and it is safe\r
2189             // to do so since the animation is already running and the\r
2190             // runner callback code will run in async\r
2191             existingAnimation.runner.end();\r
2192           } else if (existingAnimation.structural) {\r
2193             // this means that the animation is queued into a digest, but\r
2194             // hasn't started yet. Therefore it is safe to run the close\r
2195             // method which will call the runner methods in async.\r
2196             existingAnimation.close();\r
2197           } else {\r
2198             // this will merge the existing animation options into this new follow-up animation\r
2199             mergeAnimationOptions(element, newAnimation.options, existingAnimation.options);\r
2200           }\r
2201         } else {\r
2202           // a joined animation means that this animation will take over the existing one\r
2203           // so an example would involve a leave animation taking over an enter. Then when\r
2204           // the postDigest kicks in the enter will be ignored.\r
2205           var joinAnimationFlag = isAllowed('join', element, newAnimation, existingAnimation);\r
2206           if (joinAnimationFlag) {\r
2207             if (existingAnimation.state === RUNNING_STATE) {\r
2208               normalizeAnimationOptions(element, options);\r
2209             } else {\r
2210               event = newAnimation.event = existingAnimation.event;\r
2211               options = mergeAnimationOptions(element, existingAnimation.options, newAnimation.options);\r
2212               return runner;\r
2213             }\r
2214           }\r
2215         }\r
2216       } else {\r
2217         // normalization in this case means that it removes redundant CSS classes that\r
2218         // already exist (addClass) or do not exist (removeClass) on the element\r
2219         normalizeAnimationOptions(element, options);\r
2220       }\r
2221 \r
2222       // when the options are merged and cleaned up we may end up not having to do\r
2223       // an animation at all, therefore we should check this before issuing a post\r
2224       // digest callback. Structural animations will always run no matter what.\r
2225       var isValidAnimation = newAnimation.structural;\r
2226       if (!isValidAnimation) {\r
2227         // animate (from/to) can be quickly checked first, otherwise we check if any classes are present\r
2228         isValidAnimation = (newAnimation.event === 'animate' && Object.keys(newAnimation.options.to || {}).length > 0)\r
2229                             || hasAnimationClasses(newAnimation.options);\r
2230       }\r
2231 \r
2232       if (!isValidAnimation) {\r
2233         close();\r
2234         clearElementAnimationState(element);\r
2235         return runner;\r
2236       }\r
2237 \r
2238       if (isStructural) {\r
2239         closeParentClassBasedAnimations(parent);\r
2240       }\r
2241 \r
2242       // the counter keeps track of cancelled animations\r
2243       var counter = (existingAnimation.counter || 0) + 1;\r
2244       newAnimation.counter = counter;\r
2245 \r
2246       markElementAnimationState(element, PRE_DIGEST_STATE, newAnimation);\r
2247 \r
2248       $rootScope.$$postDigest(function() {\r
2249         var animationDetails = activeAnimationsLookup.get(node);\r
2250         var animationCancelled = !animationDetails;\r
2251         animationDetails = animationDetails || {};\r
2252 \r
2253         // if addClass/removeClass is called before something like enter then the\r
2254         // registered parent element may not be present. The code below will ensure\r
2255         // that a final value for parent element is obtained\r
2256         var parentElement = element.parent() || [];\r
2257 \r
2258         // animate/structural/class-based animations all have requirements. Otherwise there\r
2259         // is no point in performing an animation. The parent node must also be set.\r
2260         var isValidAnimation = parentElement.length > 0\r
2261                                 && (animationDetails.event === 'animate'\r
2262                                     || animationDetails.structural\r
2263                                     || hasAnimationClasses(animationDetails.options));\r
2264 \r
2265         // this means that the previous animation was cancelled\r
2266         // even if the follow-up animation is the same event\r
2267         if (animationCancelled || animationDetails.counter !== counter || !isValidAnimation) {\r
2268           // if another animation did not take over then we need\r
2269           // to make sure that the domOperation and options are\r
2270           // handled accordingly\r
2271           if (animationCancelled) {\r
2272             applyAnimationClasses(element, options);\r
2273             applyAnimationStyles(element, options);\r
2274           }\r
2275 \r
2276           // if the event changed from something like enter to leave then we do\r
2277           // it, otherwise if it's the same then the end result will be the same too\r
2278           if (animationCancelled || (isStructural && animationDetails.event !== event)) {\r
2279             options.domOperation();\r
2280             runner.end();\r
2281           }\r
2282 \r
2283           // in the event that the element animation was not cancelled or a follow-up animation\r
2284           // isn't allowed to animate from here then we need to clear the state of the element\r
2285           // so that any future animations won't read the expired animation data.\r
2286           if (!isValidAnimation) {\r
2287             clearElementAnimationState(element);\r
2288           }\r
2289 \r
2290           return;\r
2291         }\r
2292 \r
2293         // this combined multiple class to addClass / removeClass into a setClass event\r
2294         // so long as a structural event did not take over the animation\r
2295         event = !animationDetails.structural && hasAnimationClasses(animationDetails.options, true)\r
2296             ? 'setClass'\r
2297             : animationDetails.event;\r
2298 \r
2299         if (animationDetails.structural) {\r
2300           closeParentClassBasedAnimations(parentElement);\r
2301         }\r
2302 \r
2303         markElementAnimationState(element, RUNNING_STATE);\r
2304         var realRunner = $$animation(element, event, animationDetails.options);\r
2305         realRunner.done(function(status) {\r
2306           close(!status);\r
2307           var animationDetails = activeAnimationsLookup.get(node);\r
2308           if (animationDetails && animationDetails.counter === counter) {\r
2309             clearElementAnimationState(getDomNode(element));\r
2310           }\r
2311           notifyProgress(runner, event, 'close', {});\r
2312         });\r
2313 \r
2314         // this will update the runner's flow-control events based on\r
2315         // the `realRunner` object.\r
2316         runner.setHost(realRunner);\r
2317         notifyProgress(runner, event, 'start', {});\r
2318       });\r
2319 \r
2320       return runner;\r
2321 \r
2322       function notifyProgress(runner, event, phase, data) {\r
2323         triggerCallback(event, element, phase, data);\r
2324         runner.progress(event, phase, data);\r
2325       }\r
2326 \r
2327       function close(reject) { // jshint ignore:line\r
2328         applyAnimationClasses(element, options);\r
2329         applyAnimationStyles(element, options);\r
2330         options.domOperation();\r
2331         runner.complete(!reject);\r
2332       }\r
2333     }\r
2334 \r
2335     function closeChildAnimations(element) {\r
2336       var node = getDomNode(element);\r
2337       var children = node.querySelectorAll('[' + NG_ANIMATE_ATTR_NAME + ']');\r
2338       forEach(children, function(child) {\r
2339         var state = parseInt(child.getAttribute(NG_ANIMATE_ATTR_NAME));\r
2340         var animationDetails = activeAnimationsLookup.get(child);\r
2341         switch (state) {\r
2342           case RUNNING_STATE:\r
2343             animationDetails.runner.end();\r
2344             /* falls through */\r
2345           case PRE_DIGEST_STATE:\r
2346             if (animationDetails) {\r
2347               activeAnimationsLookup.remove(child);\r
2348             }\r
2349             break;\r
2350         }\r
2351       });\r
2352     }\r
2353 \r
2354     function clearElementAnimationState(element) {\r
2355       var node = getDomNode(element);\r
2356       node.removeAttribute(NG_ANIMATE_ATTR_NAME);\r
2357       activeAnimationsLookup.remove(node);\r
2358     }\r
2359 \r
2360     function isMatchingElement(nodeOrElmA, nodeOrElmB) {\r
2361       return getDomNode(nodeOrElmA) === getDomNode(nodeOrElmB);\r
2362     }\r
2363 \r
2364     function closeParentClassBasedAnimations(startingElement) {\r
2365       var parentNode = getDomNode(startingElement);\r
2366       do {\r
2367         if (!parentNode || parentNode.nodeType !== ELEMENT_NODE) break;\r
2368 \r
2369         var animationDetails = activeAnimationsLookup.get(parentNode);\r
2370         if (animationDetails) {\r
2371           examineParentAnimation(parentNode, animationDetails);\r
2372         }\r
2373 \r
2374         parentNode = parentNode.parentNode;\r
2375       } while (true);\r
2376 \r
2377       // since animations are detected from CSS classes, we need to flush all parent\r
2378       // class-based animations so that the parent classes are all present for child\r
2379       // animations to properly function (otherwise any CSS selectors may not work)\r
2380       function examineParentAnimation(node, animationDetails) {\r
2381         // enter/leave/move always have priority\r
2382         if (animationDetails.structural || !hasAnimationClasses(animationDetails.options)) return;\r
2383 \r
2384         if (animationDetails.state === RUNNING_STATE) {\r
2385           animationDetails.runner.end();\r
2386         }\r
2387         clearElementAnimationState(node);\r
2388       }\r
2389     }\r
2390 \r
2391     function areAnimationsAllowed(element, parentElement, event) {\r
2392       var bodyElementDetected = false;\r
2393       var rootElementDetected = false;\r
2394       var parentAnimationDetected = false;\r
2395       var animateChildren;\r
2396 \r
2397       var parentHost = element.data(NG_ANIMATE_PIN_DATA);\r
2398       if (parentHost) {\r
2399         parentElement = parentHost;\r
2400       }\r
2401 \r
2402       while (parentElement && parentElement.length) {\r
2403         if (!rootElementDetected) {\r
2404           // angular doesn't want to attempt to animate elements outside of the application\r
2405           // therefore we need to ensure that the rootElement is an ancestor of the current element\r
2406           rootElementDetected = isMatchingElement(parentElement, $rootElement);\r
2407         }\r
2408 \r
2409         var parentNode = parentElement[0];\r
2410         if (parentNode.nodeType !== ELEMENT_NODE) {\r
2411           // no point in inspecting the #document element\r
2412           break;\r
2413         }\r
2414 \r
2415         var details = activeAnimationsLookup.get(parentNode) || {};\r
2416         // either an enter, leave or move animation will commence\r
2417         // therefore we can't allow any animations to take place\r
2418         // but if a parent animation is class-based then that's ok\r
2419         if (!parentAnimationDetected) {\r
2420           parentAnimationDetected = details.structural || disabledElementsLookup.get(parentNode);\r
2421         }\r
2422 \r
2423         if (isUndefined(animateChildren) || animateChildren === true) {\r
2424           var value = parentElement.data(NG_ANIMATE_CHILDREN_DATA);\r
2425           if (isDefined(value)) {\r
2426             animateChildren = value;\r
2427           }\r
2428         }\r
2429 \r
2430         // there is no need to continue traversing at this point\r
2431         if (parentAnimationDetected && animateChildren === false) break;\r
2432 \r
2433         if (!rootElementDetected) {\r
2434           // angular doesn't want to attempt to animate elements outside of the application\r
2435           // therefore we need to ensure that the rootElement is an ancestor of the current element\r
2436           rootElementDetected = isMatchingElement(parentElement, $rootElement);\r
2437           if (!rootElementDetected) {\r
2438             parentHost = parentElement.data(NG_ANIMATE_PIN_DATA);\r
2439             if (parentHost) {\r
2440               parentElement = parentHost;\r
2441             }\r
2442           }\r
2443         }\r
2444 \r
2445         if (!bodyElementDetected) {\r
2446           // we also need to ensure that the element is or will be apart of the body element\r
2447           // otherwise it is pointless to even issue an animation to be rendered\r
2448           bodyElementDetected = isMatchingElement(parentElement, bodyElement);\r
2449         }\r
2450 \r
2451         parentElement = parentElement.parent();\r
2452       }\r
2453 \r
2454       var allowAnimation = !parentAnimationDetected || animateChildren;\r
2455       return allowAnimation && rootElementDetected && bodyElementDetected;\r
2456     }\r
2457 \r
2458     function markElementAnimationState(element, state, details) {\r
2459       details = details || {};\r
2460       details.state = state;\r
2461 \r
2462       var node = getDomNode(element);\r
2463       node.setAttribute(NG_ANIMATE_ATTR_NAME, state);\r
2464 \r
2465       var oldValue = activeAnimationsLookup.get(node);\r
2466       var newValue = oldValue\r
2467           ? extend(oldValue, details)\r
2468           : details;\r
2469       activeAnimationsLookup.put(node, newValue);\r
2470     }\r
2471   }];\r
2472 }];\r
2473 \r
2474 var $$rAFMutexFactory = ['$$rAF', function($$rAF) {\r
2475   return function() {\r
2476     var passed = false;\r
2477     $$rAF(function() {\r
2478       passed = true;\r
2479     });\r
2480     return function(fn) {\r
2481       passed ? fn() : $$rAF(fn);\r
2482     };\r
2483   };\r
2484 }];\r
2485 \r
2486 var $$AnimateRunnerFactory = ['$q', '$$rAFMutex', function($q, $$rAFMutex) {\r
2487   var INITIAL_STATE = 0;\r
2488   var DONE_PENDING_STATE = 1;\r
2489   var DONE_COMPLETE_STATE = 2;\r
2490 \r
2491   AnimateRunner.chain = function(chain, callback) {\r
2492     var index = 0;\r
2493 \r
2494     next();\r
2495     function next() {\r
2496       if (index === chain.length) {\r
2497         callback(true);\r
2498         return;\r
2499       }\r
2500 \r
2501       chain[index](function(response) {\r
2502         if (response === false) {\r
2503           callback(false);\r
2504           return;\r
2505         }\r
2506         index++;\r
2507         next();\r
2508       });\r
2509     }\r
2510   };\r
2511 \r
2512   AnimateRunner.all = function(runners, callback) {\r
2513     var count = 0;\r
2514     var status = true;\r
2515     forEach(runners, function(runner) {\r
2516       runner.done(onProgress);\r
2517     });\r
2518 \r
2519     function onProgress(response) {\r
2520       status = status && response;\r
2521       if (++count === runners.length) {\r
2522         callback(status);\r
2523       }\r
2524     }\r
2525   };\r
2526 \r
2527   function AnimateRunner(host) {\r
2528     this.setHost(host);\r
2529 \r
2530     this._doneCallbacks = [];\r
2531     this._runInAnimationFrame = $$rAFMutex();\r
2532     this._state = 0;\r
2533   }\r
2534 \r
2535   AnimateRunner.prototype = {\r
2536     setHost: function(host) {\r
2537       this.host = host || {};\r
2538     },\r
2539 \r
2540     done: function(fn) {\r
2541       if (this._state === DONE_COMPLETE_STATE) {\r
2542         fn();\r
2543       } else {\r
2544         this._doneCallbacks.push(fn);\r
2545       }\r
2546     },\r
2547 \r
2548     progress: noop,\r
2549 \r
2550     getPromise: function() {\r
2551       if (!this.promise) {\r
2552         var self = this;\r
2553         this.promise = $q(function(resolve, reject) {\r
2554           self.done(function(status) {\r
2555             status === false ? reject() : resolve();\r
2556           });\r
2557         });\r
2558       }\r
2559       return this.promise;\r
2560     },\r
2561 \r
2562     then: function(resolveHandler, rejectHandler) {\r
2563       return this.getPromise().then(resolveHandler, rejectHandler);\r
2564     },\r
2565 \r
2566     'catch': function(handler) {\r
2567       return this.getPromise()['catch'](handler);\r
2568     },\r
2569 \r
2570     'finally': function(handler) {\r
2571       return this.getPromise()['finally'](handler);\r
2572     },\r
2573 \r
2574     pause: function() {\r
2575       if (this.host.pause) {\r
2576         this.host.pause();\r
2577       }\r
2578     },\r
2579 \r
2580     resume: function() {\r
2581       if (this.host.resume) {\r
2582         this.host.resume();\r
2583       }\r
2584     },\r
2585 \r
2586     end: function() {\r
2587       if (this.host.end) {\r
2588         this.host.end();\r
2589       }\r
2590       this._resolve(true);\r
2591     },\r
2592 \r
2593     cancel: function() {\r
2594       if (this.host.cancel) {\r
2595         this.host.cancel();\r
2596       }\r
2597       this._resolve(false);\r
2598     },\r
2599 \r
2600     complete: function(response) {\r
2601       var self = this;\r
2602       if (self._state === INITIAL_STATE) {\r
2603         self._state = DONE_PENDING_STATE;\r
2604         self._runInAnimationFrame(function() {\r
2605           self._resolve(response);\r
2606         });\r
2607       }\r
2608     },\r
2609 \r
2610     _resolve: function(response) {\r
2611       if (this._state !== DONE_COMPLETE_STATE) {\r
2612         forEach(this._doneCallbacks, function(fn) {\r
2613           fn(response);\r
2614         });\r
2615         this._doneCallbacks.length = 0;\r
2616         this._state = DONE_COMPLETE_STATE;\r
2617       }\r
2618     }\r
2619   };\r
2620 \r
2621   return AnimateRunner;\r
2622 }];\r
2623 \r
2624 var $$AnimationProvider = ['$animateProvider', function($animateProvider) {\r
2625   var NG_ANIMATE_REF_ATTR = 'ng-animate-ref';\r
2626 \r
2627   var drivers = this.drivers = [];\r
2628 \r
2629   var RUNNER_STORAGE_KEY = '$$animationRunner';\r
2630 \r
2631   function setRunner(element, runner) {\r
2632     element.data(RUNNER_STORAGE_KEY, runner);\r
2633   }\r
2634 \r
2635   function removeRunner(element) {\r
2636     element.removeData(RUNNER_STORAGE_KEY);\r
2637   }\r
2638 \r
2639   function getRunner(element) {\r
2640     return element.data(RUNNER_STORAGE_KEY);\r
2641   }\r
2642 \r
2643   this.$get = ['$$jqLite', '$rootScope', '$injector', '$$AnimateRunner', '$$rAFScheduler',\r
2644        function($$jqLite,   $rootScope,   $injector,   $$AnimateRunner,   $$rAFScheduler) {\r
2645 \r
2646     var animationQueue = [];\r
2647     var applyAnimationClasses = applyAnimationClassesFactory($$jqLite);\r
2648 \r
2649     var totalPendingClassBasedAnimations = 0;\r
2650     var totalActiveClassBasedAnimations = 0;\r
2651     var classBasedAnimationsQueue = [];\r
2652 \r
2653     // TODO(matsko): document the signature in a better way\r
2654     return function(element, event, options) {\r
2655       options = prepareAnimationOptions(options);\r
2656       var isStructural = ['enter', 'move', 'leave'].indexOf(event) >= 0;\r
2657 \r
2658       // there is no animation at the current moment, however\r
2659       // these runner methods will get later updated with the\r
2660       // methods leading into the driver's end/cancel methods\r
2661       // for now they just stop the animation from starting\r
2662       var runner = new $$AnimateRunner({\r
2663         end: function() { close(); },\r
2664         cancel: function() { close(true); }\r
2665       });\r
2666 \r
2667       if (!drivers.length) {\r
2668         close();\r
2669         return runner;\r
2670       }\r
2671 \r
2672       setRunner(element, runner);\r
2673 \r
2674       var classes = mergeClasses(element.attr('class'), mergeClasses(options.addClass, options.removeClass));\r
2675       var tempClasses = options.tempClasses;\r
2676       if (tempClasses) {\r
2677         classes += ' ' + tempClasses;\r
2678         options.tempClasses = null;\r
2679       }\r
2680 \r
2681       var classBasedIndex;\r
2682       if (!isStructural) {\r
2683         classBasedIndex = totalPendingClassBasedAnimations;\r
2684         totalPendingClassBasedAnimations += 1;\r
2685       }\r
2686 \r
2687       animationQueue.push({\r
2688         // this data is used by the postDigest code and passed into\r
2689         // the driver step function\r
2690         element: element,\r
2691         classes: classes,\r
2692         event: event,\r
2693         classBasedIndex: classBasedIndex,\r
2694         structural: isStructural,\r
2695         options: options,\r
2696         beforeStart: beforeStart,\r
2697         close: close\r
2698       });\r
2699 \r
2700       element.on('$destroy', handleDestroyedElement);\r
2701 \r
2702       // we only want there to be one function called within the post digest\r
2703       // block. This way we can group animations for all the animations that\r
2704       // were apart of the same postDigest flush call.\r
2705       if (animationQueue.length > 1) return runner;\r
2706 \r
2707       $rootScope.$$postDigest(function() {\r
2708         totalActiveClassBasedAnimations = totalPendingClassBasedAnimations;\r
2709         totalPendingClassBasedAnimations = 0;\r
2710         classBasedAnimationsQueue.length = 0;\r
2711 \r
2712         var animations = [];\r
2713         forEach(animationQueue, function(entry) {\r
2714           // the element was destroyed early on which removed the runner\r
2715           // form its storage. This means we can't animate this element\r
2716           // at all and it already has been closed due to destruction.\r
2717           if (getRunner(entry.element)) {\r
2718             animations.push(entry);\r
2719           }\r
2720         });\r
2721 \r
2722         // now any future animations will be in another postDigest\r
2723         animationQueue.length = 0;\r
2724 \r
2725         forEach(groupAnimations(animations), function(animationEntry) {\r
2726           if (animationEntry.structural) {\r
2727             triggerAnimationStart();\r
2728           } else {\r
2729             classBasedAnimationsQueue.push({\r
2730               node: getDomNode(animationEntry.element),\r
2731               fn: triggerAnimationStart\r
2732             });\r
2733 \r
2734             if (animationEntry.classBasedIndex === totalActiveClassBasedAnimations - 1) {\r
2735               // we need to sort each of the animations in order of parent to child\r
2736               // relationships. This ensures that the child classes are applied at the\r
2737               // right time.\r
2738               classBasedAnimationsQueue = classBasedAnimationsQueue.sort(function(a,b) {\r
2739                 return b.node.contains(a.node);\r
2740               }).map(function(entry) {\r
2741                 return entry.fn;\r
2742               });\r
2743 \r
2744               $$rAFScheduler(classBasedAnimationsQueue);\r
2745             }\r
2746           }\r
2747 \r
2748           function triggerAnimationStart() {\r
2749             // it's important that we apply the `ng-animate` CSS class and the\r
2750             // temporary classes before we do any driver invoking since these\r
2751             // CSS classes may be required for proper CSS detection.\r
2752             animationEntry.beforeStart();\r
2753 \r
2754             var startAnimationFn, closeFn = animationEntry.close;\r
2755 \r
2756             // in the event that the element was removed before the digest runs or\r
2757             // during the RAF sequencing then we should not trigger the animation.\r
2758             var targetElement = animationEntry.anchors\r
2759                 ? (animationEntry.from.element || animationEntry.to.element)\r
2760                 : animationEntry.element;\r
2761 \r
2762             if (getRunner(targetElement) && getDomNode(targetElement).parentNode) {\r
2763               var operation = invokeFirstDriver(animationEntry);\r
2764               if (operation) {\r
2765                 startAnimationFn = operation.start;\r
2766               }\r
2767             }\r
2768 \r
2769             if (!startAnimationFn) {\r
2770               closeFn();\r
2771             } else {\r
2772               var animationRunner = startAnimationFn();\r
2773               animationRunner.done(function(status) {\r
2774                 closeFn(!status);\r
2775               });\r
2776               updateAnimationRunners(animationEntry, animationRunner);\r
2777             }\r
2778           }\r
2779         });\r
2780       });\r
2781 \r
2782       return runner;\r
2783 \r
2784       // TODO(matsko): change to reference nodes\r
2785       function getAnchorNodes(node) {\r
2786         var SELECTOR = '[' + NG_ANIMATE_REF_ATTR + ']';\r
2787         var items = node.hasAttribute(NG_ANIMATE_REF_ATTR)\r
2788               ? [node]\r
2789               : node.querySelectorAll(SELECTOR);\r
2790         var anchors = [];\r
2791         forEach(items, function(node) {\r
2792           var attr = node.getAttribute(NG_ANIMATE_REF_ATTR);\r
2793           if (attr && attr.length) {\r
2794             anchors.push(node);\r
2795           }\r
2796         });\r
2797         return anchors;\r
2798       }\r
2799 \r
2800       function groupAnimations(animations) {\r
2801         var preparedAnimations = [];\r
2802         var refLookup = {};\r
2803         forEach(animations, function(animation, index) {\r
2804           var element = animation.element;\r
2805           var node = getDomNode(element);\r
2806           var event = animation.event;\r
2807           var enterOrMove = ['enter', 'move'].indexOf(event) >= 0;\r
2808           var anchorNodes = animation.structural ? getAnchorNodes(node) : [];\r
2809 \r
2810           if (anchorNodes.length) {\r
2811             var direction = enterOrMove ? 'to' : 'from';\r
2812 \r
2813             forEach(anchorNodes, function(anchor) {\r
2814               var key = anchor.getAttribute(NG_ANIMATE_REF_ATTR);\r
2815               refLookup[key] = refLookup[key] || {};\r
2816               refLookup[key][direction] = {\r
2817                 animationID: index,\r
2818                 element: jqLite(anchor)\r
2819               };\r
2820             });\r
2821           } else {\r
2822             preparedAnimations.push(animation);\r
2823           }\r
2824         });\r
2825 \r
2826         var usedIndicesLookup = {};\r
2827         var anchorGroups = {};\r
2828         forEach(refLookup, function(operations, key) {\r
2829           var from = operations.from;\r
2830           var to = operations.to;\r
2831 \r
2832           if (!from || !to) {\r
2833             // only one of these is set therefore we can't have an\r
2834             // anchor animation since all three pieces are required\r
2835             var index = from ? from.animationID : to.animationID;\r
2836             var indexKey = index.toString();\r
2837             if (!usedIndicesLookup[indexKey]) {\r
2838               usedIndicesLookup[indexKey] = true;\r
2839               preparedAnimations.push(animations[index]);\r
2840             }\r
2841             return;\r
2842           }\r
2843 \r
2844           var fromAnimation = animations[from.animationID];\r
2845           var toAnimation = animations[to.animationID];\r
2846           var lookupKey = from.animationID.toString();\r
2847           if (!anchorGroups[lookupKey]) {\r
2848             var group = anchorGroups[lookupKey] = {\r
2849               structural: true,\r
2850               beforeStart: function() {\r
2851                 fromAnimation.beforeStart();\r
2852                 toAnimation.beforeStart();\r
2853               },\r
2854               close: function() {\r
2855                 fromAnimation.close();\r
2856                 toAnimation.close();\r
2857               },\r
2858               classes: cssClassesIntersection(fromAnimation.classes, toAnimation.classes),\r
2859               from: fromAnimation,\r
2860               to: toAnimation,\r
2861               anchors: [] // TODO(matsko): change to reference nodes\r
2862             };\r
2863 \r
2864             // the anchor animations require that the from and to elements both have at least\r
2865             // one shared CSS class which effictively marries the two elements together to use\r
2866             // the same animation driver and to properly sequence the anchor animation.\r
2867             if (group.classes.length) {\r
2868               preparedAnimations.push(group);\r
2869             } else {\r
2870               preparedAnimations.push(fromAnimation);\r
2871               preparedAnimations.push(toAnimation);\r
2872             }\r
2873           }\r
2874 \r
2875           anchorGroups[lookupKey].anchors.push({\r
2876             'out': from.element, 'in': to.element\r
2877           });\r
2878         });\r
2879 \r
2880         return preparedAnimations;\r
2881       }\r
2882 \r
2883       function cssClassesIntersection(a,b) {\r
2884         a = a.split(' ');\r
2885         b = b.split(' ');\r
2886         var matches = [];\r
2887 \r
2888         for (var i = 0; i < a.length; i++) {\r
2889           var aa = a[i];\r
2890           if (aa.substring(0,3) === 'ng-') continue;\r
2891 \r
2892           for (var j = 0; j < b.length; j++) {\r
2893             if (aa === b[j]) {\r
2894               matches.push(aa);\r
2895               break;\r
2896             }\r
2897           }\r
2898         }\r
2899 \r
2900         return matches.join(' ');\r
2901       }\r
2902 \r
2903       function invokeFirstDriver(animationDetails) {\r
2904         // we loop in reverse order since the more general drivers (like CSS and JS)\r
2905         // may attempt more elements, but custom drivers are more particular\r
2906         for (var i = drivers.length - 1; i >= 0; i--) {\r
2907           var driverName = drivers[i];\r
2908           if (!$injector.has(driverName)) continue; // TODO(matsko): remove this check\r
2909 \r
2910           var factory = $injector.get(driverName);\r
2911           var driver = factory(animationDetails);\r
2912           if (driver) {\r
2913             return driver;\r
2914           }\r
2915         }\r
2916       }\r
2917 \r
2918       function beforeStart() {\r
2919         element.addClass(NG_ANIMATE_CLASSNAME);\r
2920         if (tempClasses) {\r
2921           $$jqLite.addClass(element, tempClasses);\r
2922         }\r
2923       }\r
2924 \r
2925       function updateAnimationRunners(animation, newRunner) {\r
2926         if (animation.from && animation.to) {\r
2927           update(animation.from.element);\r
2928           update(animation.to.element);\r
2929         } else {\r
2930           update(animation.element);\r
2931         }\r
2932 \r
2933         function update(element) {\r
2934           getRunner(element).setHost(newRunner);\r
2935         }\r
2936       }\r
2937 \r
2938       function handleDestroyedElement() {\r
2939         var runner = getRunner(element);\r
2940         if (runner && (event !== 'leave' || !options.$$domOperationFired)) {\r
2941           runner.end();\r
2942         }\r
2943       }\r
2944 \r
2945       function close(rejected) { // jshint ignore:line\r
2946         element.off('$destroy', handleDestroyedElement);\r
2947         removeRunner(element);\r
2948 \r
2949         applyAnimationClasses(element, options);\r
2950         applyAnimationStyles(element, options);\r
2951         options.domOperation();\r
2952 \r
2953         if (tempClasses) {\r
2954           $$jqLite.removeClass(element, tempClasses);\r
2955         }\r
2956 \r
2957         element.removeClass(NG_ANIMATE_CLASSNAME);\r
2958         runner.complete(!rejected);\r
2959       }\r
2960     };\r
2961   }];\r
2962 }];\r
2963 \r
2964 /* global angularAnimateModule: true,\r
2965 \r
2966    $$rAFMutexFactory,\r
2967    $$rAFSchedulerFactory,\r
2968    $$AnimateChildrenDirective,\r
2969    $$AnimateRunnerFactory,\r
2970    $$AnimateQueueProvider,\r
2971    $$AnimationProvider,\r
2972    $AnimateCssProvider,\r
2973    $$AnimateCssDriverProvider,\r
2974    $$AnimateJsProvider,\r
2975    $$AnimateJsDriverProvider,\r
2976 */\r
2977 \r
2978 /**\r
2979  * @ngdoc module\r
2980  * @name ngAnimate\r
2981  * @description\r
2982  *\r
2983  * The `ngAnimate` module provides support for CSS-based animations (keyframes and transitions) as well as JavaScript-based animations via\r
2984  * callback hooks. Animations are not enabled by default, however, by including `ngAnimate` then the animation hooks are enabled for an Angular app.\r
2985  *\r
2986  * <div doc-module-components="ngAnimate"></div>\r
2987  *\r
2988  * # Usage\r
2989  * Simply put, there are two ways to make use of animations when ngAnimate is used: by using **CSS** and **JavaScript**. The former works purely based\r
2990  * using CSS (by using matching CSS selectors/styles) and the latter triggers animations that are registered via `module.animation()`. For\r
2991  * both CSS and JS animations the sole requirement is to have a matching `CSS class` that exists both in the registered animation and within\r
2992  * the HTML element that the animation will be triggered on.\r
2993  *\r
2994  * ## Directive Support\r
2995  * The following directives are "animation aware":\r
2996  *\r
2997  * | Directive                                                                                                | Supported Animations                                                     |\r
2998  * |----------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------|\r
2999  * | {@link ng.directive:ngRepeat#animations ngRepeat}                                                        | enter, leave and move                                                    |\r
3000  * | {@link ngRoute.directive:ngView#animations ngView}                                                       | enter and leave                                                          |\r
3001  * | {@link ng.directive:ngInclude#animations ngInclude}                                                      | enter and leave                                                          |\r
3002  * | {@link ng.directive:ngSwitch#animations ngSwitch}                                                        | enter and leave                                                          |\r
3003  * | {@link ng.directive:ngIf#animations ngIf}                                                                | enter and leave                                                          |\r
3004  * | {@link ng.directive:ngClass#animations ngClass}                                                          | add and remove (the CSS class(es) present)                               |\r
3005  * | {@link ng.directive:ngShow#animations ngShow} & {@link ng.directive:ngHide#animations ngHide}            | add and remove (the ng-hide class value)                                 |\r
3006  * | {@link ng.directive:form#animation-hooks form} & {@link ng.directive:ngModel#animation-hooks ngModel}    | add and remove (dirty, pristine, valid, invalid & all other validations) |\r
3007  * | {@link module:ngMessages#animations ngMessages}                                                          | add and remove (ng-active & ng-inactive)                                 |\r
3008  * | {@link module:ngMessages#animations ngMessage}                                                           | enter and leave                                                          |\r
3009  *\r
3010  * (More information can be found by visiting each the documentation associated with each directive.)\r
3011  *\r
3012  * ## CSS-based Animations\r
3013  *\r
3014  * CSS-based animations with ngAnimate are unique since they require no JavaScript code at all. By using a CSS class that we reference between our HTML\r
3015  * and CSS code we can create an animation that will be picked up by Angular when an the underlying directive performs an operation.\r
3016  *\r
3017  * The example below shows how an `enter` animation can be made possible on a element using `ng-if`:\r
3018  *\r
3019  * ```html\r
3020  * <div ng-if="bool" class="fade">\r
3021  *    Fade me in out\r
3022  * </div>\r
3023  * <button ng-click="bool=true">Fade In!</button>\r
3024  * <button ng-click="bool=false">Fade Out!</button>\r
3025  * ```\r
3026  *\r
3027  * Notice the CSS class **fade**? We can now create the CSS transition code that references this class:\r
3028  *\r
3029  * ```css\r
3030  * /&#42; The starting CSS styles for the enter animation &#42;/\r
3031  * .fade.ng-enter {\r
3032  *   transition:0.5s linear all;\r
3033  *   opacity:0;\r
3034  * }\r
3035  *\r
3036  * /&#42; The finishing CSS styles for the enter animation &#42;/\r
3037  * .fade.ng-enter.ng-enter-active {\r
3038  *   opacity:1;\r
3039  * }\r
3040  * ```\r
3041  *\r
3042  * The key thing to remember here is that, depending on the animation event (which each of the directives above trigger depending on what's going on) two\r
3043  * generated CSS classes will be applied to the element; in the example above we have `.ng-enter` and `.ng-enter-active`. For CSS transitions, the transition\r
3044  * code **must** be defined within the starting CSS class (in this case `.ng-enter`). The destination class is what the transition will animate towards.\r
3045  *\r
3046  * If for example we wanted to create animations for `leave` and `move` (ngRepeat triggers move) then we can do so using the same CSS naming conventions:\r
3047  *\r
3048  * ```css\r
3049  * /&#42; now the element will fade out before it is removed from the DOM &#42;/\r
3050  * .fade.ng-leave {\r
3051  *   transition:0.5s linear all;\r
3052  *   opacity:1;\r
3053  * }\r
3054  * .fade.ng-leave.ng-leave-active {\r
3055  *   opacity:0;\r
3056  * }\r
3057  * ```\r
3058  *\r
3059  * We can also make use of **CSS Keyframes** by referencing the keyframe animation within the starting CSS class:\r
3060  *\r
3061  * ```css\r
3062  * /&#42; there is no need to define anything inside of the destination\r
3063  * CSS class since the keyframe will take charge of the animation &#42;/\r
3064  * .fade.ng-leave {\r
3065  *   animation: my_fade_animation 0.5s linear;\r
3066  *   -webkit-animation: my_fade_animation 0.5s linear;\r
3067  * }\r
3068  *\r
3069  * @keyframes my_fade_animation {\r
3070  *   from { opacity:1; }\r
3071  *   to { opacity:0; }\r
3072  * }\r
3073  *\r
3074  * @-webkit-keyframes my_fade_animation {\r
3075  *   from { opacity:1; }\r
3076  *   to { opacity:0; }\r
3077  * }\r
3078  * ```\r
3079  *\r
3080  * Feel free also mix transitions and keyframes together as well as any other CSS classes on the same element.\r
3081  *\r
3082  * ### CSS Class-based Animations\r
3083  *\r
3084  * Class-based animations (animations that are triggered via `ngClass`, `ngShow`, `ngHide` and some other directives) have a slightly different\r
3085  * naming convention. Class-based animations are basic enough that a standard transition or keyframe can be referenced on the class being added\r
3086  * and removed.\r
3087  *\r
3088  * For example if we wanted to do a CSS animation for `ngHide` then we place an animation on the `.ng-hide` CSS class:\r
3089  *\r
3090  * ```html\r
3091  * <div ng-show="bool" class="fade">\r
3092  *   Show and hide me\r
3093  * </div>\r
3094  * <button ng-click="bool=true">Toggle</button>\r
3095  *\r
3096  * <style>\r
3097  * .fade.ng-hide {\r
3098  *   transition:0.5s linear all;\r
3099  *   opacity:0;\r
3100  * }\r
3101  * </style>\r
3102  * ```\r
3103  *\r
3104  * All that is going on here with ngShow/ngHide behind the scenes is the `.ng-hide` class is added/removed (when the hidden state is valid). Since\r
3105  * ngShow and ngHide are animation aware then we can match up a transition and ngAnimate handles the rest.\r
3106  *\r
3107  * In addition the addition and removal of the CSS class, ngAnimate also provides two helper methods that we can use to further decorate the animation\r
3108  * with CSS styles.\r
3109  *\r
3110  * ```html\r
3111  * <div ng-class="{on:onOff}" class="highlight">\r
3112  *   Highlight this box\r
3113  * </div>\r
3114  * <button ng-click="onOff=!onOff">Toggle</button>\r
3115  *\r
3116  * <style>\r
3117  * .highlight {\r
3118  *   transition:0.5s linear all;\r
3119  * }\r
3120  * .highlight.on-add {\r
3121  *   background:white;\r
3122  * }\r
3123  * .highlight.on {\r
3124  *   background:yellow;\r
3125  * }\r
3126  * .highlight.on-remove {\r
3127  *   background:black;\r
3128  * }\r
3129  * </style>\r
3130  * ```\r
3131  *\r
3132  * We can also make use of CSS keyframes by placing them within the CSS classes.\r
3133  *\r
3134  *\r
3135  * ### CSS Staggering Animations\r
3136  * A Staggering animation is a collection of animations that are issued with a slight delay in between each successive operation resulting in a\r
3137  * curtain-like effect. The ngAnimate module (versions >=1.2) supports staggering animations and the stagger effect can be\r
3138  * performed by creating a **ng-EVENT-stagger** CSS class and attaching that class to the base CSS class used for\r
3139  * the animation. The style property expected within the stagger class can either be a **transition-delay** or an\r
3140  * **animation-delay** property (or both if your animation contains both transitions and keyframe animations).\r
3141  *\r
3142  * ```css\r
3143  * .my-animation.ng-enter {\r
3144  *   /&#42; standard transition code &#42;/\r
3145  *   transition: 1s linear all;\r
3146  *   opacity:0;\r
3147  * }\r
3148  * .my-animation.ng-enter-stagger {\r
3149  *   /&#42; this will have a 100ms delay between each successive leave animation &#42;/\r
3150  *   transition-delay: 0.1s;\r
3151  *\r
3152  *   /&#42; in case the stagger doesn't work then the duration value\r
3153  *    must be set to 0 to avoid an accidental CSS inheritance &#42;/\r
3154  *   transition-duration: 0s;\r
3155  * }\r
3156  * .my-animation.ng-enter.ng-enter-active {\r
3157  *   /&#42; standard transition styles &#42;/\r
3158  *   opacity:1;\r
3159  * }\r
3160  * ```\r
3161  *\r
3162  * Staggering animations work by default in ngRepeat (so long as the CSS class is defined). Outside of ngRepeat, to use staggering animations\r
3163  * on your own, they can be triggered by firing multiple calls to the same event on $animate. However, the restrictions surrounding this\r
3164  * are that each of the elements must have the same CSS className value as well as the same parent element. A stagger operation\r
3165  * will also be reset if one or more animation frames have passed since the multiple calls to `$animate` were fired.\r
3166  *\r
3167  * The following code will issue the **ng-leave-stagger** event on the element provided:\r
3168  *\r
3169  * ```js\r
3170  * var kids = parent.children();\r
3171  *\r
3172  * $animate.leave(kids[0]); //stagger index=0\r
3173  * $animate.leave(kids[1]); //stagger index=1\r
3174  * $animate.leave(kids[2]); //stagger index=2\r
3175  * $animate.leave(kids[3]); //stagger index=3\r
3176  * $animate.leave(kids[4]); //stagger index=4\r
3177  *\r
3178  * window.requestAnimationFrame(function() {\r
3179  *   //stagger has reset itself\r
3180  *   $animate.leave(kids[5]); //stagger index=0\r
3181  *   $animate.leave(kids[6]); //stagger index=1\r
3182  *\r
3183  *   $scope.$digest();\r
3184  * });\r
3185  * ```\r
3186  *\r
3187  * Stagger animations are currently only supported within CSS-defined animations.\r
3188  *\r
3189  * ### The `ng-animate` CSS class\r
3190  *\r
3191  * When ngAnimate is animating an element it will apply the `ng-animate` CSS class to the element for the duration of the animation.\r
3192  * This is a temporary CSS class and it will be removed once the animation is over (for both JavaScript and CSS-based animations).\r
3193  *\r
3194  * Therefore, animations can be applied to an element using this temporary class directly via CSS.\r
3195  *\r
3196  * ```css\r
3197  * .zipper.ng-animate {\r
3198  *   transition:0.5s linear all;\r
3199  * }\r
3200  * .zipper.ng-enter {\r
3201  *   opacity:0;\r
3202  * }\r
3203  * .zipper.ng-enter.ng-enter-active {\r
3204  *   opacity:1;\r
3205  * }\r
3206  * .zipper.ng-leave {\r
3207  *   opacity:1;\r
3208  * }\r
3209  * .zipper.ng-leave.ng-leave-active {\r
3210  *   opacity:0;\r
3211  * }\r
3212  * ```\r
3213  *\r
3214  * (Note that the `ng-animate` CSS class is reserved and it cannot be applied on an element directly since ngAnimate will always remove\r
3215  * the CSS class once an animation has completed.)\r
3216  *\r
3217  *\r
3218  * ## JavaScript-based Animations\r
3219  *\r
3220  * ngAnimate also allows for animations to be consumed by JavaScript code. The approach is similar to CSS-based animations (where there is a shared\r
3221  * CSS class that is referenced in our HTML code) but in addition we need to register the JavaScript animation on the module. By making use of the\r
3222  * `module.animation()` module function we can register the ainmation.\r
3223  *\r
3224  * Let's see an example of a enter/leave animation using `ngRepeat`:\r
3225  *\r
3226  * ```html\r
3227  * <div ng-repeat="item in items" class="slide">\r
3228  *   {{ item }}\r
3229  * </div>\r
3230  * ```\r
3231  *\r
3232  * See the **slide** CSS class? Let's use that class to define an animation that we'll structure in our module code by using `module.animation`:\r
3233  *\r
3234  * ```js\r
3235  * myModule.animation('.slide', [function() {\r
3236  *   return {\r
3237  *     // make note that other events (like addClass/removeClass)\r
3238  *     // have different function input parameters\r
3239  *     enter: function(element, doneFn) {\r
3240  *       jQuery(element).fadeIn(1000, doneFn);\r
3241  *\r
3242  *       // remember to call doneFn so that angular\r
3243  *       // knows that the animation has concluded\r
3244  *     },\r
3245  *\r
3246  *     move: function(element, doneFn) {\r
3247  *       jQuery(element).fadeIn(1000, doneFn);\r
3248  *     },\r
3249  *\r
3250  *     leave: function(element, doneFn) {\r
3251  *       jQuery(element).fadeOut(1000, doneFn);\r
3252  *     }\r
3253  *   }\r
3254  * }]\r
3255  * ```\r
3256  *\r
3257  * The nice thing about JS-based animations is that we can inject other services and make use of advanced animation libraries such as\r
3258  * greensock.js and velocity.js.\r
3259  *\r
3260  * If our animation code class-based (meaning that something like `ngClass`, `ngHide` and `ngShow` triggers it) then we can still define\r
3261  * our animations inside of the same registered animation, however, the function input arguments are a bit different:\r
3262  *\r
3263  * ```html\r
3264  * <div ng-class="color" class="colorful">\r
3265  *   this box is moody\r
3266  * </div>\r
3267  * <button ng-click="color='red'">Change to red</button>\r
3268  * <button ng-click="color='blue'">Change to blue</button>\r
3269  * <button ng-click="color='green'">Change to green</button>\r
3270  * ```\r
3271  *\r
3272  * ```js\r
3273  * myModule.animation('.colorful', [function() {\r
3274  *   return {\r
3275  *     addClass: function(element, className, doneFn) {\r
3276  *       // do some cool animation and call the doneFn\r
3277  *     },\r
3278  *     removeClass: function(element, className, doneFn) {\r
3279  *       // do some cool animation and call the doneFn\r
3280  *     },\r
3281  *     setClass: function(element, addedClass, removedClass, doneFn) {\r
3282  *       // do some cool animation and call the doneFn\r
3283  *     }\r
3284  *   }\r
3285  * }]\r
3286  * ```\r
3287  *\r
3288  * ## CSS + JS Animations Together\r
3289  *\r
3290  * AngularJS 1.4 and higher has taken steps to make the amalgamation of CSS and JS animations more flexible. However, unlike earlier versions of Angular,\r
3291  * defining CSS and JS animations to work off of the same CSS class will not work anymore. Therefore the example below will only result in **JS animations taking\r
3292  * charge of the animation**:\r
3293  *\r
3294  * ```html\r
3295  * <div ng-if="bool" class="slide">\r
3296  *   Slide in and out\r
3297  * </div>\r
3298  * ```\r
3299  *\r
3300  * ```js\r
3301  * myModule.animation('.slide', [function() {\r
3302  *   return {\r
3303  *     enter: function(element, doneFn) {\r
3304  *       jQuery(element).slideIn(1000, doneFn);\r
3305  *     }\r
3306  *   }\r
3307  * }]\r
3308  * ```\r
3309  *\r
3310  * ```css\r
3311  * .slide.ng-enter {\r
3312  *   transition:0.5s linear all;\r
3313  *   transform:translateY(-100px);\r
3314  * }\r
3315  * .slide.ng-enter.ng-enter-active {\r
3316  *   transform:translateY(0);\r
3317  * }\r
3318  * ```\r
3319  *\r
3320  * Does this mean that CSS and JS animations cannot be used together? Do JS-based animations always have higher priority? We can make up for the\r
3321  * lack of CSS animations by using the `$animateCss` service to trigger our own tweaked-out, CSS-based animations directly from\r
3322  * our own JS-based animation code:\r
3323  *\r
3324  * ```js\r
3325  * myModule.animation('.slide', ['$animateCss', function($animateCss) {\r
3326  *   return {\r
3327  *     enter: function(element, doneFn) {\r
3328 *        // this will trigger `.slide.ng-enter` and `.slide.ng-enter-active`.\r
3329  *       var runner = $animateCss(element, {\r
3330  *         event: 'enter',\r
3331  *         structural: true\r
3332  *       }).start();\r
3333 *        runner.done(doneFn);\r
3334  *     }\r
3335  *   }\r
3336  * }]\r
3337  * ```\r
3338  *\r
3339  * The nice thing here is that we can save bandwidth by sticking to our CSS-based animation code and we don't need to rely on a 3rd-party animation framework.\r
3340  *\r
3341  * The `$animateCss` service is very powerful since we can feed in all kinds of extra properties that will be evaluated and fed into a CSS transition or\r
3342  * keyframe animation. For example if we wanted to animate the height of an element while adding and removing classes then we can do so by providing that\r
3343  * data into `$animateCss` directly:\r
3344  *\r
3345  * ```js\r
3346  * myModule.animation('.slide', ['$animateCss', function($animateCss) {\r
3347  *   return {\r
3348  *     enter: function(element, doneFn) {\r
3349  *       var runner = $animateCss(element, {\r
3350  *         event: 'enter',\r
3351  *         addClass: 'maroon-setting',\r
3352  *         from: { height:0 },\r
3353  *         to: { height: 200 }\r
3354  *       }).start();\r
3355  *\r
3356  *       runner.done(doneFn);\r
3357  *     }\r
3358  *   }\r
3359  * }]\r
3360  * ```\r
3361  *\r
3362  * Now we can fill in the rest via our transition CSS code:\r
3363  *\r
3364  * ```css\r
3365  * /&#42; the transition tells ngAnimate to make the animation happen &#42;/\r
3366  * .slide.ng-enter { transition:0.5s linear all; }\r
3367  *\r
3368  * /&#42; this extra CSS class will be absorbed into the transition\r
3369  * since the $animateCss code is adding the class &#42;/\r
3370  * .maroon-setting { background:red; }\r
3371  * ```\r
3372  *\r
3373  * And `$animateCss` will figure out the rest. Just make sure to have the `done()` callback fire the `doneFn` function to signal when the animation is over.\r
3374  *\r
3375  * To learn more about what's possible be sure to visit the {@link ngAnimate.$animateCss $animateCss service}.\r
3376  *\r
3377  * ## Animation Anchoring (via `ng-animate-ref`)\r
3378  *\r
3379  * ngAnimate in AngularJS 1.4 comes packed with the ability to cross-animate elements between\r
3380  * structural areas of an application (like views) by pairing up elements using an attribute\r
3381  * called `ng-animate-ref`.\r
3382  *\r
3383  * Let's say for example we have two views that are managed by `ng-view` and we want to show\r
3384  * that there is a relationship between two components situated in within these views. By using the\r
3385  * `ng-animate-ref` attribute we can identify that the two components are paired together and we\r
3386  * can then attach an animation, which is triggered when the view changes.\r
3387  *\r
3388  * Say for example we have the following template code:\r
3389  *\r
3390  * ```html\r
3391  * <!-- index.html -->\r
3392  * <div ng-view class="view-animation">\r
3393  * </div>\r
3394  *\r
3395  * <!-- home.html -->\r
3396  * <a href="#/banner-page">\r
3397  *   <img src="./banner.jpg" class="banner" ng-animate-ref="banner">\r
3398  * </a>\r
3399  *\r
3400  * <!-- banner-page.html -->\r
3401  * <img src="./banner.jpg" class="banner" ng-animate-ref="banner">\r
3402  * ```\r
3403  *\r
3404  * Now, when the view changes (once the link is clicked), ngAnimate will examine the\r
3405  * HTML contents to see if there is a match reference between any components in the view\r
3406  * that is leaving and the view that is entering. It will scan both the view which is being\r
3407  * removed (leave) and inserted (enter) to see if there are any paired DOM elements that\r
3408  * contain a matching ref value.\r
3409  *\r
3410  * The two images match since they share the same ref value. ngAnimate will now create a\r
3411  * transport element (which is a clone of the first image element) and it will then attempt\r
3412  * to animate to the position of the second image element in the next view. For the animation to\r
3413  * work a special CSS class called `ng-anchor` will be added to the transported element.\r
3414  *\r
3415  * We can now attach a transition onto the `.banner.ng-anchor` CSS class and then\r
3416  * ngAnimate will handle the entire transition for us as well as the addition and removal of\r
3417  * any changes of CSS classes between the elements:\r
3418  *\r
3419  * ```css\r
3420  * .banner.ng-anchor {\r
3421  *   /&#42; this animation will last for 1 second since there are\r
3422  *          two phases to the animation (an `in` and an `out` phase) &#42;/\r
3423  *   transition:0.5s linear all;\r
3424  * }\r
3425  * ```\r
3426  *\r
3427  * We also **must** include animations for the views that are being entered and removed\r
3428  * (otherwise anchoring wouldn't be possible since the new view would be inserted right away).\r
3429  *\r
3430  * ```css\r
3431  * .view-animation.ng-enter, .view-animation.ng-leave {\r
3432  *   transition:0.5s linear all;\r
3433  *   position:fixed;\r
3434  *   left:0;\r
3435  *   top:0;\r
3436  *   width:100%;\r
3437  * }\r
3438  * .view-animation.ng-enter {\r
3439  *   transform:translateX(100%);\r
3440  * }\r
3441  * .view-animation.ng-leave,\r
3442  * .view-animation.ng-enter.ng-enter-active {\r
3443  *   transform:translateX(0%);\r
3444  * }\r
3445  * .view-animation.ng-leave.ng-leave-active {\r
3446  *   transform:translateX(-100%);\r
3447  * }\r
3448  * ```\r
3449  *\r
3450  * Now we can jump back to the anchor animation. When the animation happens, there are two stages that occur:\r
3451  * an `out` and an `in` stage. The `out` stage happens first and that is when the element is animated away\r
3452  * from its origin. Once that animation is over then the `in` stage occurs which animates the\r
3453  * element to its destination. The reason why there are two animations is to give enough time\r
3454  * for the enter animation on the new element to be ready.\r
3455  *\r
3456  * The example above sets up a transition for both the in and out phases, but we can also target the out or\r
3457  * in phases directly via `ng-anchor-out` and `ng-anchor-in`.\r
3458  *\r
3459  * ```css\r
3460  * .banner.ng-anchor-out {\r
3461  *   transition: 0.5s linear all;\r
3462  *\r
3463  *   /&#42; the scale will be applied during the out animation,\r
3464  *          but will be animated away when the in animation runs &#42;/\r
3465  *   transform: scale(1.2);\r
3466  * }\r
3467  *\r
3468  * .banner.ng-anchor-in {\r
3469  *   transition: 1s linear all;\r
3470  * }\r
3471  * ```\r
3472  *\r
3473  *\r
3474  *\r
3475  *\r
3476  * ### Anchoring Demo\r
3477  *\r
3478   <example module="anchoringExample"\r
3479            name="anchoringExample"\r
3480            id="anchoringExample"\r
3481            deps="angular-animate.js;angular-route.js"\r
3482            animations="true">\r
3483     <file name="index.html">\r
3484       <a href="#/">Home</a>\r
3485       <hr />\r
3486       <div class="view-container">\r
3487         <div ng-view class="view"></div>\r
3488       </div>\r
3489     </file>\r
3490     <file name="script.js">\r
3491       angular.module('anchoringExample', ['ngAnimate', 'ngRoute'])\r
3492         .config(['$routeProvider', function($routeProvider) {\r
3493           $routeProvider.when('/', {\r
3494             templateUrl: 'home.html',\r
3495             controller: 'HomeController as home'\r
3496           });\r
3497           $routeProvider.when('/profile/:id', {\r
3498             templateUrl: 'profile.html',\r
3499             controller: 'ProfileController as profile'\r
3500           });\r
3501         }])\r
3502         .run(['$rootScope', function($rootScope) {\r
3503           $rootScope.records = [\r
3504             { id:1, title: "Miss Beulah Roob" },\r
3505             { id:2, title: "Trent Morissette" },\r
3506             { id:3, title: "Miss Ava Pouros" },\r
3507             { id:4, title: "Rod Pouros" },\r
3508             { id:5, title: "Abdul Rice" },\r
3509             { id:6, title: "Laurie Rutherford Sr." },\r
3510             { id:7, title: "Nakia McLaughlin" },\r
3511             { id:8, title: "Jordon Blanda DVM" },\r
3512             { id:9, title: "Rhoda Hand" },\r
3513             { id:10, title: "Alexandrea Sauer" }\r
3514           ];\r
3515         }])\r
3516         .controller('HomeController', [function() {\r
3517           //empty\r
3518         }])\r
3519         .controller('ProfileController', ['$rootScope', '$routeParams', function($rootScope, $routeParams) {\r
3520           var index = parseInt($routeParams.id, 10);\r
3521           var record = $rootScope.records[index - 1];\r
3522 \r
3523           this.title = record.title;\r
3524           this.id = record.id;\r
3525         }]);\r
3526     </file>\r
3527     <file name="home.html">\r
3528       <h2>Welcome to the home page</h1>\r
3529       <p>Please click on an element</p>\r
3530       <a class="record"\r
3531          ng-href="#/profile/{{ record.id }}"\r
3532          ng-animate-ref="{{ record.id }}"\r
3533          ng-repeat="record in records">\r
3534         {{ record.title }}\r
3535       </a>\r
3536     </file>\r
3537     <file name="profile.html">\r
3538       <div class="profile record" ng-animate-ref="{{ profile.id }}">\r
3539         {{ profile.title }}\r
3540       </div>\r
3541     </file>\r
3542     <file name="animations.css">\r
3543       .record {\r
3544         display:block;\r
3545         font-size:20px;\r
3546       }\r
3547       .profile {\r
3548         background:black;\r
3549         color:white;\r
3550         font-size:100px;\r
3551       }\r
3552       .view-container {\r
3553         position:relative;\r
3554       }\r
3555       .view-container > .view.ng-animate {\r
3556         position:absolute;\r
3557         top:0;\r
3558         left:0;\r
3559         width:100%;\r
3560         min-height:500px;\r
3561       }\r
3562       .view.ng-enter, .view.ng-leave,\r
3563       .record.ng-anchor {\r
3564         transition:0.5s linear all;\r
3565       }\r
3566       .view.ng-enter {\r
3567         transform:translateX(100%);\r
3568       }\r
3569       .view.ng-enter.ng-enter-active, .view.ng-leave {\r
3570         transform:translateX(0%);\r
3571       }\r
3572       .view.ng-leave.ng-leave-active {\r
3573         transform:translateX(-100%);\r
3574       }\r
3575       .record.ng-anchor-out {\r
3576         background:red;\r
3577       }\r
3578     </file>\r
3579   </example>\r
3580  *\r
3581  * ### How is the element transported?\r
3582  *\r
3583  * When an anchor animation occurs, ngAnimate will clone the starting element and position it exactly where the starting\r
3584  * element is located on screen via absolute positioning. The cloned element will be placed inside of the root element\r
3585  * of the application (where ng-app was defined) and all of the CSS classes of the starting element will be applied. The\r
3586  * element will then animate into the `out` and `in` animations and will eventually reach the coordinates and match\r
3587  * the dimensions of the destination element. During the entire animation a CSS class of `.ng-animate-shim` will be applied\r
3588  * to both the starting and destination elements in order to hide them from being visible (the CSS styling for the class\r
3589  * is: `visibility:hidden`). Once the anchor reaches its destination then it will be removed and the destination element\r
3590  * will become visible since the shim class will be removed.\r
3591  *\r
3592  * ### How is the morphing handled?\r
3593  *\r
3594  * CSS Anchoring relies on transitions and keyframes and the internal code is intelligent enough to figure out\r
3595  * what CSS classes differ between the starting element and the destination element. These different CSS classes\r
3596  * will be added/removed on the anchor element and a transition will be applied (the transition that is provided\r
3597  * in the anchor class). Long story short, ngAnimate will figure out what classes to add and remove which will\r
3598  * make the transition of the element as smooth and automatic as possible. Be sure to use simple CSS classes that\r
3599  * do not rely on DOM nesting structure so that the anchor element appears the same as the starting element (since\r
3600  * the cloned element is placed inside of root element which is likely close to the body element).\r
3601  *\r
3602  * Note that if the root element is on the `<html>` element then the cloned node will be placed inside of body.\r
3603  *\r
3604  *\r
3605  * ## Using $animate in your directive code\r
3606  *\r
3607  * So far we've explored how to feed in animations into an Angular application, but how do we trigger animations within our own directives in our application?\r
3608  * By injecting the `$animate` service into our directive code, we can trigger structural and class-based hooks which can then be consumed by animations. Let's\r
3609  * imagine we have a greeting box that shows and hides itself when the data changes\r
3610  *\r
3611  * ```html\r
3612  * <greeting-box active="onOrOff">Hi there</greeting-box>\r
3613  * ```\r
3614  *\r
3615  * ```js\r
3616  * ngModule.directive('greetingBox', ['$animate', function($animate) {\r
3617  *   return function(scope, element, attrs) {\r
3618  *     attrs.$observe('active', function(value) {\r
3619  *       value ? $animate.addClass(element, 'on') : $animate.removeClass(element, 'on');\r
3620  *     });\r
3621  *   });\r
3622  * }]);\r
3623  * ```\r
3624  *\r
3625  * Now the `on` CSS class is added and removed on the greeting box component. Now if we add a CSS class on top of the greeting box element\r
3626  * in our HTML code then we can trigger a CSS or JS animation to happen.\r
3627  *\r
3628  * ```css\r
3629  * /&#42; normally we would create a CSS class to reference on the element &#42;/\r
3630  * greeting-box.on { transition:0.5s linear all; background:green; color:white; }\r
3631  * ```\r
3632  *\r
3633  * The `$animate` service contains a variety of other methods like `enter`, `leave`, `animate` and `setClass`. To learn more about what's\r
3634  * possible be sure to visit the {@link ng.$animate $animate service API page}.\r
3635  *\r
3636  *\r
3637  * ### Preventing Collisions With Third Party Libraries\r
3638  *\r
3639  * Some third-party frameworks place animation duration defaults across many element or className\r
3640  * selectors in order to make their code small and reuseable. This can lead to issues with ngAnimate, which\r
3641  * is expecting actual animations on these elements and has to wait for their completion.\r
3642  *\r
3643  * You can prevent this unwanted behavior by using a prefix on all your animation classes:\r
3644  *\r
3645  * ```css\r
3646  * /&#42; prefixed with animate- &#42;/\r
3647  * .animate-fade-add.animate-fade-add-active {\r
3648  *   transition:1s linear all;\r
3649  *   opacity:0;\r
3650  * }\r
3651  * ```\r
3652  *\r
3653  * You then configure `$animate` to enforce this prefix:\r
3654  *\r
3655  * ```js\r
3656  * $animateProvider.classNameFilter(/animate-/);\r
3657  * ```\r
3658  *\r
3659  * This also may provide your application with a speed boost since only specific elements containing CSS class prefix\r
3660  * will be evaluated for animation when any DOM changes occur in the application.\r
3661  *\r
3662  * ## Callbacks and Promises\r
3663  *\r
3664  * When `$animate` is called it returns a promise that can be used to capture when the animation has ended. Therefore if we were to trigger\r
3665  * an animation (within our directive code) then we can continue performing directive and scope related activities after the animation has\r
3666  * ended by chaining onto the returned promise that animation method returns.\r
3667  *\r
3668  * ```js\r
3669  * // somewhere within the depths of the directive\r
3670  * $animate.enter(element, parent).then(function() {\r
3671  *   //the animation has completed\r
3672  * });\r
3673  * ```\r
3674  *\r
3675  * (Note that earlier versions of Angular prior to v1.4 required the promise code to be wrapped using `$scope.$apply(...)`. This is not the case\r
3676  * anymore.)\r
3677  *\r
3678  * In addition to the animation promise, we can also make use of animation-related callbacks within our directives and controller code by registering\r
3679  * an event listener using the `$animate` service. Let's say for example that an animation was triggered on our view\r
3680  * routing controller to hook into that:\r
3681  *\r
3682  * ```js\r
3683  * ngModule.controller('HomePageController', ['$animate', function($animate) {\r
3684  *   $animate.on('enter', ngViewElement, function(element) {\r
3685  *     // the animation for this route has completed\r
3686  *   }]);\r
3687  * }])\r
3688  * ```\r
3689  *\r
3690  * (Note that you will need to trigger a digest within the callback to get angular to notice any scope-related changes.)\r
3691  */\r
3692 \r
3693 /**\r
3694  * @ngdoc service\r
3695  * @name $animate\r
3696  * @kind object\r
3697  *\r
3698  * @description\r
3699  * The ngAnimate `$animate` service documentation is the same for the core `$animate` service.\r
3700  *\r
3701  * Click here {@link ng.$animate $animate to learn more about animations with `$animate`}.\r
3702  */\r
3703 angular.module('ngAnimate', [])\r
3704   .directive('ngAnimateChildren', $$AnimateChildrenDirective)\r
3705 \r
3706   .factory('$$rAFMutex', $$rAFMutexFactory)\r
3707   .factory('$$rAFScheduler', $$rAFSchedulerFactory)\r
3708 \r
3709   .factory('$$AnimateRunner', $$AnimateRunnerFactory)\r
3710 \r
3711   .provider('$$animateQueue', $$AnimateQueueProvider)\r
3712   .provider('$$animation', $$AnimationProvider)\r
3713 \r
3714   .provider('$animateCss', $AnimateCssProvider)\r
3715   .provider('$$animateCssDriver', $$AnimateCssDriverProvider)\r
3716 \r
3717   .provider('$$animateJs', $$AnimateJsProvider)\r
3718   .provider('$$animateJsDriver', $$AnimateJsDriverProvider);\r
3719 \r
3720 \r
3721 })(window, window.angular);\r