angular-gem 1.2.18.1 → 1.2.19

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,15 +1,15 @@
1
1
  ---
2
2
  !binary "U0hBMQ==":
3
3
  metadata.gz: !binary |-
4
- MDcwOWI5YTZkYTNiNzQ1ZDM1OTg2ZmMxNWE0MDVlM2QzYzYzMDFjOQ==
4
+ OWY1Y2FiM2JkY2RhN2FhOTZiZGIxYzMxZjE2MWU2YzU0MDVjMTNhNw==
5
5
  data.tar.gz: !binary |-
6
- YzY2YTIxMjc0NmRlZTA4Nzg5NTQ1Mzk1ZTM3YzQ0NGNhZTkzMjhhMw==
6
+ ZTZlZjkzNWM5MTA3YTBmOGM1YzIxNzllOGE5NWQ3NWVkZTE1YWQwYw==
7
7
  SHA512:
8
8
  metadata.gz: !binary |-
9
- Y2Y5MWU5NmViZWFkMzY1ZTVmMzJjNzg0N2RjNzE1ZDMxYjA4YWY4Y2YxMWRk
10
- MThjMTAyOWVjMzNkNWFmZGI3MjhkZWNhMjgxZmM5MGQ0MDE4NWQxYzBjNzFm
11
- MGMzNTc2OWRjYTA4NjYwMzhhYWE2NGVjYWQ1MjcwYjFkNmI4ZTY=
9
+ MjQ2MDY2OTQ0M2FhZDhkMWFlZDAxNDBhMThkMGIzMTc0NDFkYWQ4YWUwMTk0
10
+ MGMxODliYjEyNjY4OGFhZjcyY2Q5N2I5ZTcxMmY4MzI0NjliZjJhYzk4MTJj
11
+ MjI4YmI5OGU0NmE1ZDI3NDk1NDlmYzdlYWYyNzI1NDhhNmQ5ZGI=
12
12
  data.tar.gz: !binary |-
13
- ZWFlZDJiNDUyMGQ0ZDIyMGYzNzA3YWZlNmEyMjBmYzA2ODNlZTM5ZjllYTA0
14
- MDRlYjQ4YTI0YjkyNWY2MmI5MDc5YmJlYzhmMjBmZjc2YjgwMjYxMTU2NzVl
15
- NTI2MTllZTVhOTZlNTFjZjBmMWMyNTlhYzhmZDk5NTJjNDUzZGE=
13
+ NmVmYzVjMTgzMTJjOTU4YTc1OWJmMGQ5ZWY3NjlmNWJlYjcyNGE4MGRkMGVi
14
+ NmE0MTY3MGRjZDhmNDE5MDYyZWU2NjhhNGMyNmI3ZmNjM2RlNmIzMDcwZDNk
15
+ NWYxODU3YTk0NzY1YjEwN2ZiMmRhYjE4ODAzN2VhODNlNWJkYjU=
@@ -1,3 +1,3 @@
1
1
  module AngularGem
2
- VERSION = "1.2.18.1"
2
+ VERSION = "1.2.19"
3
3
  end
@@ -0,0 +1,1633 @@
1
+ /**
2
+ * @license AngularJS v1.2.19
3
+ * (c) 2010-2014 Google, Inc. http://angularjs.org
4
+ * License: MIT
5
+ */
6
+ (function(window, angular, undefined) {'use strict';
7
+
8
+ /* jshint maxlen: false */
9
+
10
+ /**
11
+ * @ngdoc module
12
+ * @name ngAnimate
13
+ * @description
14
+ *
15
+ * # ngAnimate
16
+ *
17
+ * The `ngAnimate` module provides support for JavaScript, CSS3 transition and CSS3 keyframe animation hooks within existing core and custom directives.
18
+ *
19
+ *
20
+ * <div doc-module-components="ngAnimate"></div>
21
+ *
22
+ * # Usage
23
+ *
24
+ * To see animations in action, all that is required is to define the appropriate CSS classes
25
+ * or to register a JavaScript animation via the myModule.animation() function. The directives that support animation automatically are:
26
+ * `ngRepeat`, `ngInclude`, `ngIf`, `ngSwitch`, `ngShow`, `ngHide`, `ngView` and `ngClass`. Custom directives can take advantage of animation
27
+ * by using the `$animate` service.
28
+ *
29
+ * Below is a more detailed breakdown of the supported animation events provided by pre-existing ng directives:
30
+ *
31
+ * | Directive | Supported Animations |
32
+ * |---------------------------------------------------------- |----------------------------------------------------|
33
+ * | {@link ng.directive:ngRepeat#usage_animations ngRepeat} | enter, leave and move |
34
+ * | {@link ngRoute.directive:ngView#usage_animations ngView} | enter and leave |
35
+ * | {@link ng.directive:ngInclude#usage_animations ngInclude} | enter and leave |
36
+ * | {@link ng.directive:ngSwitch#usage_animations ngSwitch} | enter and leave |
37
+ * | {@link ng.directive:ngIf#usage_animations ngIf} | enter and leave |
38
+ * | {@link ng.directive:ngClass#usage_animations ngClass} | add and remove |
39
+ * | {@link ng.directive:ngShow#usage_animations ngShow & ngHide} | add and remove (the ng-hide class value) |
40
+ * | {@link ng.directive:form#usage_animations form} | add and remove (dirty, pristine, valid, invalid & all other validations) |
41
+ * | {@link ng.directive:ngModel#usage_animations ngModel} | add and remove (dirty, pristine, valid, invalid & all other validations) |
42
+ *
43
+ * You can find out more information about animations upon visiting each directive page.
44
+ *
45
+ * Below is an example of how to apply animations to a directive that supports animation hooks:
46
+ *
47
+ * ```html
48
+ * <style type="text/css">
49
+ * .slide.ng-enter, .slide.ng-leave {
50
+ * -webkit-transition:0.5s linear all;
51
+ * transition:0.5s linear all;
52
+ * }
53
+ *
54
+ * .slide.ng-enter { } /&#42; starting animations for enter &#42;/
55
+ * .slide.ng-enter-active { } /&#42; terminal animations for enter &#42;/
56
+ * .slide.ng-leave { } /&#42; starting animations for leave &#42;/
57
+ * .slide.ng-leave-active { } /&#42; terminal animations for leave &#42;/
58
+ * </style>
59
+ *
60
+ * <!--
61
+ * the animate service will automatically add .ng-enter and .ng-leave to the element
62
+ * to trigger the CSS transition/animations
63
+ * -->
64
+ * <ANY class="slide" ng-include="..."></ANY>
65
+ * ```
66
+ *
67
+ * Keep in mind that if an animation is running, any child elements cannot be animated until the parent element's
68
+ * animation has completed.
69
+ *
70
+ * <h2>CSS-defined Animations</h2>
71
+ * The animate service will automatically apply two CSS classes to the animated element and these two CSS classes
72
+ * are designed to contain the start and end CSS styling. Both CSS transitions and keyframe animations are supported
73
+ * and can be used to play along with this naming structure.
74
+ *
75
+ * The following code below demonstrates how to perform animations using **CSS transitions** with Angular:
76
+ *
77
+ * ```html
78
+ * <style type="text/css">
79
+ * /&#42;
80
+ * The animate class is apart of the element and the ng-enter class
81
+ * is attached to the element once the enter animation event is triggered
82
+ * &#42;/
83
+ * .reveal-animation.ng-enter {
84
+ * -webkit-transition: 1s linear all; /&#42; Safari/Chrome &#42;/
85
+ * transition: 1s linear all; /&#42; All other modern browsers and IE10+ &#42;/
86
+ *
87
+ * /&#42; The animation preparation code &#42;/
88
+ * opacity: 0;
89
+ * }
90
+ *
91
+ * /&#42;
92
+ * Keep in mind that you want to combine both CSS
93
+ * classes together to avoid any CSS-specificity
94
+ * conflicts
95
+ * &#42;/
96
+ * .reveal-animation.ng-enter.ng-enter-active {
97
+ * /&#42; The animation code itself &#42;/
98
+ * opacity: 1;
99
+ * }
100
+ * </style>
101
+ *
102
+ * <div class="view-container">
103
+ * <div ng-view class="reveal-animation"></div>
104
+ * </div>
105
+ * ```
106
+ *
107
+ * The following code below demonstrates how to perform animations using **CSS animations** with Angular:
108
+ *
109
+ * ```html
110
+ * <style type="text/css">
111
+ * .reveal-animation.ng-enter {
112
+ * -webkit-animation: enter_sequence 1s linear; /&#42; Safari/Chrome &#42;/
113
+ * animation: enter_sequence 1s linear; /&#42; IE10+ and Future Browsers &#42;/
114
+ * }
115
+ * @-webkit-keyframes enter_sequence {
116
+ * from { opacity:0; }
117
+ * to { opacity:1; }
118
+ * }
119
+ * @keyframes enter_sequence {
120
+ * from { opacity:0; }
121
+ * to { opacity:1; }
122
+ * }
123
+ * </style>
124
+ *
125
+ * <div class="view-container">
126
+ * <div ng-view class="reveal-animation"></div>
127
+ * </div>
128
+ * ```
129
+ *
130
+ * Both CSS3 animations and transitions can be used together and the animate service will figure out the correct duration and delay timing.
131
+ *
132
+ * Upon DOM mutation, the event class is added first (something like `ng-enter`), then the browser prepares itself to add
133
+ * the active class (in this case `ng-enter-active`) which then triggers the animation. The animation module will automatically
134
+ * detect the CSS code to determine when the animation ends. Once the animation is over then both CSS classes will be
135
+ * removed from the DOM. If a browser does not support CSS transitions or CSS animations then the animation will start and end
136
+ * immediately resulting in a DOM element that is at its final state. This final state is when the DOM element
137
+ * has no CSS transition/animation classes applied to it.
138
+ *
139
+ * <h3>CSS Staggering Animations</h3>
140
+ * A Staggering animation is a collection of animations that are issued with a slight delay in between each successive operation resulting in a
141
+ * curtain-like effect. The ngAnimate module, as of 1.2.0, supports staggering animations and the stagger effect can be
142
+ * performed by creating a **ng-EVENT-stagger** CSS class and attaching that class to the base CSS class used for
143
+ * the animation. The style property expected within the stagger class can either be a **transition-delay** or an
144
+ * **animation-delay** property (or both if your animation contains both transitions and keyframe animations).
145
+ *
146
+ * ```css
147
+ * .my-animation.ng-enter {
148
+ * /&#42; standard transition code &#42;/
149
+ * -webkit-transition: 1s linear all;
150
+ * transition: 1s linear all;
151
+ * opacity:0;
152
+ * }
153
+ * .my-animation.ng-enter-stagger {
154
+ * /&#42; this will have a 100ms delay between each successive leave animation &#42;/
155
+ * -webkit-transition-delay: 0.1s;
156
+ * transition-delay: 0.1s;
157
+ *
158
+ * /&#42; in case the stagger doesn't work then these two values
159
+ * must be set to 0 to avoid an accidental CSS inheritance &#42;/
160
+ * -webkit-transition-duration: 0s;
161
+ * transition-duration: 0s;
162
+ * }
163
+ * .my-animation.ng-enter.ng-enter-active {
164
+ * /&#42; standard transition styles &#42;/
165
+ * opacity:1;
166
+ * }
167
+ * ```
168
+ *
169
+ * Staggering animations work by default in ngRepeat (so long as the CSS class is defined). Outside of ngRepeat, to use staggering animations
170
+ * on your own, they can be triggered by firing multiple calls to the same event on $animate. However, the restrictions surrounding this
171
+ * are that each of the elements must have the same CSS className value as well as the same parent element. A stagger operation
172
+ * will also be reset if more than 10ms has passed after the last animation has been fired.
173
+ *
174
+ * The following code will issue the **ng-leave-stagger** event on the element provided:
175
+ *
176
+ * ```js
177
+ * var kids = parent.children();
178
+ *
179
+ * $animate.leave(kids[0]); //stagger index=0
180
+ * $animate.leave(kids[1]); //stagger index=1
181
+ * $animate.leave(kids[2]); //stagger index=2
182
+ * $animate.leave(kids[3]); //stagger index=3
183
+ * $animate.leave(kids[4]); //stagger index=4
184
+ *
185
+ * $timeout(function() {
186
+ * //stagger has reset itself
187
+ * $animate.leave(kids[5]); //stagger index=0
188
+ * $animate.leave(kids[6]); //stagger index=1
189
+ * }, 100, false);
190
+ * ```
191
+ *
192
+ * Stagger animations are currently only supported within CSS-defined animations.
193
+ *
194
+ * <h2>JavaScript-defined Animations</h2>
195
+ * In the event that you do not want to use CSS3 transitions or CSS3 animations or if you wish to offer animations on browsers that do not
196
+ * yet support CSS transitions/animations, then you can make use of JavaScript animations defined inside of your AngularJS module.
197
+ *
198
+ * ```js
199
+ * //!annotate="YourApp" Your AngularJS Module|Replace this or ngModule with the module that you used to define your application.
200
+ * var ngModule = angular.module('YourApp', ['ngAnimate']);
201
+ * ngModule.animation('.my-crazy-animation', function() {
202
+ * return {
203
+ * enter: function(element, done) {
204
+ * //run the animation here and call done when the animation is complete
205
+ * return function(cancelled) {
206
+ * //this (optional) function will be called when the animation
207
+ * //completes or when the animation is cancelled (the cancelled
208
+ * //flag will be set to true if cancelled).
209
+ * };
210
+ * },
211
+ * leave: function(element, done) { },
212
+ * move: function(element, done) { },
213
+ *
214
+ * //animation that can be triggered before the class is added
215
+ * beforeAddClass: function(element, className, done) { },
216
+ *
217
+ * //animation that can be triggered after the class is added
218
+ * addClass: function(element, className, done) { },
219
+ *
220
+ * //animation that can be triggered before the class is removed
221
+ * beforeRemoveClass: function(element, className, done) { },
222
+ *
223
+ * //animation that can be triggered after the class is removed
224
+ * removeClass: function(element, className, done) { }
225
+ * };
226
+ * });
227
+ * ```
228
+ *
229
+ * JavaScript-defined animations are created with a CSS-like class selector and a collection of events which are set to run
230
+ * a javascript callback function. When an animation is triggered, $animate will look for a matching animation which fits
231
+ * the element's CSS class attribute value and then run the matching animation event function (if found).
232
+ * In other words, if the CSS classes present on the animated element match any of the JavaScript animations then the callback function will
233
+ * be executed. It should be also noted that only simple, single class selectors are allowed (compound class selectors are not supported).
234
+ *
235
+ * Within a JavaScript animation, an object containing various event callback animation functions is expected to be returned.
236
+ * As explained above, these callbacks are triggered based on the animation event. Therefore if an enter animation is run,
237
+ * and the JavaScript animation is found, then the enter callback will handle that animation (in addition to the CSS keyframe animation
238
+ * or transition code that is defined via a stylesheet).
239
+ *
240
+ */
241
+
242
+ angular.module('ngAnimate', ['ng'])
243
+
244
+ /**
245
+ * @ngdoc provider
246
+ * @name $animateProvider
247
+ * @description
248
+ *
249
+ * The `$animateProvider` allows developers to register JavaScript animation event handlers directly inside of a module.
250
+ * When an animation is triggered, the $animate service will query the $animate service to find any animations that match
251
+ * the provided name value.
252
+ *
253
+ * Requires the {@link ngAnimate `ngAnimate`} module to be installed.
254
+ *
255
+ * Please visit the {@link ngAnimate `ngAnimate`} module overview page learn more about how to use animations in your application.
256
+ *
257
+ */
258
+
259
+ //this private service is only used within CSS-enabled animations
260
+ //IE8 + IE9 do not support rAF natively, but that is fine since they
261
+ //also don't support transitions and keyframes which means that the code
262
+ //below will never be used by the two browsers.
263
+ .factory('$$animateReflow', ['$$rAF', '$document', function($$rAF, $document) {
264
+ var bod = $document[0].body;
265
+ return function(fn) {
266
+ //the returned function acts as the cancellation function
267
+ return $$rAF(function() {
268
+ //the line below will force the browser to perform a repaint
269
+ //so that all the animated elements within the animation frame
270
+ //will be properly updated and drawn on screen. This is
271
+ //required to perform multi-class CSS based animations with
272
+ //Firefox. DO NOT REMOVE THIS LINE.
273
+ var a = bod.offsetWidth + 1;
274
+ fn();
275
+ });
276
+ };
277
+ }])
278
+
279
+ .config(['$provide', '$animateProvider', function($provide, $animateProvider) {
280
+ var noop = angular.noop;
281
+ var forEach = angular.forEach;
282
+ var selectors = $animateProvider.$$selectors;
283
+
284
+ var ELEMENT_NODE = 1;
285
+ var NG_ANIMATE_STATE = '$$ngAnimateState';
286
+ var NG_ANIMATE_CLASS_NAME = 'ng-animate';
287
+ var rootAnimateState = {running: true};
288
+
289
+ function extractElementNode(element) {
290
+ for(var i = 0; i < element.length; i++) {
291
+ var elm = element[i];
292
+ if(elm.nodeType == ELEMENT_NODE) {
293
+ return elm;
294
+ }
295
+ }
296
+ }
297
+
298
+ function prepareElement(element) {
299
+ return element && angular.element(element);
300
+ }
301
+
302
+ function stripCommentsFromElement(element) {
303
+ return angular.element(extractElementNode(element));
304
+ }
305
+
306
+ function isMatchingElement(elm1, elm2) {
307
+ return extractElementNode(elm1) == extractElementNode(elm2);
308
+ }
309
+
310
+ $provide.decorator('$animate', ['$delegate', '$injector', '$sniffer', '$rootElement', '$$asyncCallback', '$rootScope', '$document',
311
+ function($delegate, $injector, $sniffer, $rootElement, $$asyncCallback, $rootScope, $document) {
312
+
313
+ var globalAnimationCounter = 0;
314
+ $rootElement.data(NG_ANIMATE_STATE, rootAnimateState);
315
+
316
+ // disable animations during bootstrap, but once we bootstrapped, wait again
317
+ // for another digest until enabling animations. The reason why we digest twice
318
+ // is because all structural animations (enter, leave and move) all perform a
319
+ // post digest operation before animating. If we only wait for a single digest
320
+ // to pass then the structural animation would render its animation on page load.
321
+ // (which is what we're trying to avoid when the application first boots up.)
322
+ $rootScope.$$postDigest(function() {
323
+ $rootScope.$$postDigest(function() {
324
+ rootAnimateState.running = false;
325
+ });
326
+ });
327
+
328
+ var classNameFilter = $animateProvider.classNameFilter();
329
+ var isAnimatableClassName = !classNameFilter
330
+ ? function() { return true; }
331
+ : function(className) {
332
+ return classNameFilter.test(className);
333
+ };
334
+
335
+ function lookup(name) {
336
+ if (name) {
337
+ var matches = [],
338
+ flagMap = {},
339
+ classes = name.substr(1).split('.');
340
+
341
+ //the empty string value is the default animation
342
+ //operation which performs CSS transition and keyframe
343
+ //animations sniffing. This is always included for each
344
+ //element animation procedure if the browser supports
345
+ //transitions and/or keyframe animations. The default
346
+ //animation is added to the top of the list to prevent
347
+ //any previous animations from affecting the element styling
348
+ //prior to the element being animated.
349
+ if ($sniffer.transitions || $sniffer.animations) {
350
+ matches.push($injector.get(selectors['']));
351
+ }
352
+
353
+ for(var i=0; i < classes.length; i++) {
354
+ var klass = classes[i],
355
+ selectorFactoryName = selectors[klass];
356
+ if(selectorFactoryName && !flagMap[klass]) {
357
+ matches.push($injector.get(selectorFactoryName));
358
+ flagMap[klass] = true;
359
+ }
360
+ }
361
+ return matches;
362
+ }
363
+ }
364
+
365
+ function animationRunner(element, animationEvent, className) {
366
+ //transcluded directives may sometimes fire an animation using only comment nodes
367
+ //best to catch this early on to prevent any animation operations from occurring
368
+ var node = element[0];
369
+ if(!node) {
370
+ return;
371
+ }
372
+
373
+ var isSetClassOperation = animationEvent == 'setClass';
374
+ var isClassBased = isSetClassOperation ||
375
+ animationEvent == 'addClass' ||
376
+ animationEvent == 'removeClass';
377
+
378
+ var classNameAdd, classNameRemove;
379
+ if(angular.isArray(className)) {
380
+ classNameAdd = className[0];
381
+ classNameRemove = className[1];
382
+ className = classNameAdd + ' ' + classNameRemove;
383
+ }
384
+
385
+ var currentClassName = element.attr('class');
386
+ var classes = currentClassName + ' ' + className;
387
+ if(!isAnimatableClassName(classes)) {
388
+ return;
389
+ }
390
+
391
+ var beforeComplete = noop,
392
+ beforeCancel = [],
393
+ before = [],
394
+ afterComplete = noop,
395
+ afterCancel = [],
396
+ after = [];
397
+
398
+ var animationLookup = (' ' + classes).replace(/\s+/g,'.');
399
+ forEach(lookup(animationLookup), function(animationFactory) {
400
+ var created = registerAnimation(animationFactory, animationEvent);
401
+ if(!created && isSetClassOperation) {
402
+ registerAnimation(animationFactory, 'addClass');
403
+ registerAnimation(animationFactory, 'removeClass');
404
+ }
405
+ });
406
+
407
+ function registerAnimation(animationFactory, event) {
408
+ var afterFn = animationFactory[event];
409
+ var beforeFn = animationFactory['before' + event.charAt(0).toUpperCase() + event.substr(1)];
410
+ if(afterFn || beforeFn) {
411
+ if(event == 'leave') {
412
+ beforeFn = afterFn;
413
+ //when set as null then animation knows to skip this phase
414
+ afterFn = null;
415
+ }
416
+ after.push({
417
+ event : event, fn : afterFn
418
+ });
419
+ before.push({
420
+ event : event, fn : beforeFn
421
+ });
422
+ return true;
423
+ }
424
+ }
425
+
426
+ function run(fns, cancellations, allCompleteFn) {
427
+ var animations = [];
428
+ forEach(fns, function(animation) {
429
+ animation.fn && animations.push(animation);
430
+ });
431
+
432
+ var count = 0;
433
+ function afterAnimationComplete(index) {
434
+ if(cancellations) {
435
+ (cancellations[index] || noop)();
436
+ if(++count < animations.length) return;
437
+ cancellations = null;
438
+ }
439
+ allCompleteFn();
440
+ }
441
+
442
+ //The code below adds directly to the array in order to work with
443
+ //both sync and async animations. Sync animations are when the done()
444
+ //operation is called right away. DO NOT REFACTOR!
445
+ forEach(animations, function(animation, index) {
446
+ var progress = function() {
447
+ afterAnimationComplete(index);
448
+ };
449
+ switch(animation.event) {
450
+ case 'setClass':
451
+ cancellations.push(animation.fn(element, classNameAdd, classNameRemove, progress));
452
+ break;
453
+ case 'addClass':
454
+ cancellations.push(animation.fn(element, classNameAdd || className, progress));
455
+ break;
456
+ case 'removeClass':
457
+ cancellations.push(animation.fn(element, classNameRemove || className, progress));
458
+ break;
459
+ default:
460
+ cancellations.push(animation.fn(element, progress));
461
+ break;
462
+ }
463
+ });
464
+
465
+ if(cancellations && cancellations.length === 0) {
466
+ allCompleteFn();
467
+ }
468
+ }
469
+
470
+ return {
471
+ node : node,
472
+ event : animationEvent,
473
+ className : className,
474
+ isClassBased : isClassBased,
475
+ isSetClassOperation : isSetClassOperation,
476
+ before : function(allCompleteFn) {
477
+ beforeComplete = allCompleteFn;
478
+ run(before, beforeCancel, function() {
479
+ beforeComplete = noop;
480
+ allCompleteFn();
481
+ });
482
+ },
483
+ after : function(allCompleteFn) {
484
+ afterComplete = allCompleteFn;
485
+ run(after, afterCancel, function() {
486
+ afterComplete = noop;
487
+ allCompleteFn();
488
+ });
489
+ },
490
+ cancel : function() {
491
+ if(beforeCancel) {
492
+ forEach(beforeCancel, function(cancelFn) {
493
+ (cancelFn || noop)(true);
494
+ });
495
+ beforeComplete(true);
496
+ }
497
+ if(afterCancel) {
498
+ forEach(afterCancel, function(cancelFn) {
499
+ (cancelFn || noop)(true);
500
+ });
501
+ afterComplete(true);
502
+ }
503
+ }
504
+ };
505
+ }
506
+
507
+ /**
508
+ * @ngdoc service
509
+ * @name $animate
510
+ * @kind function
511
+ *
512
+ * @description
513
+ * The `$animate` service provides animation detection support while performing DOM operations (enter, leave and move) as well as during addClass and removeClass operations.
514
+ * When any of these operations are run, the $animate service
515
+ * will examine any JavaScript-defined animations (which are defined by using the $animateProvider provider object)
516
+ * as well as any CSS-defined animations against the CSS classes present on the element once the DOM operation is run.
517
+ *
518
+ * The `$animate` service is used behind the scenes with pre-existing directives and animation with these directives
519
+ * will work out of the box without any extra configuration.
520
+ *
521
+ * Requires the {@link ngAnimate `ngAnimate`} module to be installed.
522
+ *
523
+ * Please visit the {@link ngAnimate `ngAnimate`} module overview page learn more about how to use animations in your application.
524
+ *
525
+ */
526
+ return {
527
+ /**
528
+ * @ngdoc method
529
+ * @name $animate#enter
530
+ * @kind function
531
+ *
532
+ * @description
533
+ * Appends the element to the parentElement element that resides in the document and then runs the enter animation. Once
534
+ * the animation is started, the following CSS classes will be present on the element for the duration of the animation:
535
+ *
536
+ * Below is a breakdown of each step that occurs during enter animation:
537
+ *
538
+ * | Animation Step | What the element class attribute looks like |
539
+ * |----------------------------------------------------------------------------------------------|---------------------------------------------|
540
+ * | 1. $animate.enter(...) is called | class="my-animation" |
541
+ * | 2. element is inserted into the parentElement element or beside the afterElement element | class="my-animation" |
542
+ * | 3. $animate runs any JavaScript-defined animations on the element | class="my-animation ng-animate" |
543
+ * | 4. the .ng-enter class is added to the element | class="my-animation ng-animate ng-enter" |
544
+ * | 5. $animate scans the element styles to get the CSS transition/animation duration and delay | class="my-animation ng-animate ng-enter" |
545
+ * | 6. $animate waits for 10ms (this performs a reflow) | class="my-animation ng-animate ng-enter" |
546
+ * | 7. the .ng-enter-active and .ng-animate-active classes are added (this triggers the CSS transition/animation) | class="my-animation ng-animate ng-animate-active ng-enter ng-enter-active" |
547
+ * | 8. $animate waits for X milliseconds for the animation to complete | class="my-animation ng-animate ng-animate-active ng-enter ng-enter-active" |
548
+ * | 9. The animation ends and all generated CSS classes are removed from the element | class="my-animation" |
549
+ * | 10. The doneCallback() callback is fired (if provided) | class="my-animation" |
550
+ *
551
+ * @param {DOMElement} element the element that will be the focus of the enter animation
552
+ * @param {DOMElement} parentElement the parent element of the element that will be the focus of the enter animation
553
+ * @param {DOMElement} afterElement the sibling element (which is the previous element) of the element that will be the focus of the enter animation
554
+ * @param {function()=} doneCallback the callback function that will be called once the animation is complete
555
+ */
556
+ enter : function(element, parentElement, afterElement, doneCallback) {
557
+ element = angular.element(element);
558
+ parentElement = prepareElement(parentElement);
559
+ afterElement = prepareElement(afterElement);
560
+
561
+ this.enabled(false, element);
562
+ $delegate.enter(element, parentElement, afterElement);
563
+ $rootScope.$$postDigest(function() {
564
+ element = stripCommentsFromElement(element);
565
+ performAnimation('enter', 'ng-enter', element, parentElement, afterElement, noop, doneCallback);
566
+ });
567
+ },
568
+
569
+ /**
570
+ * @ngdoc method
571
+ * @name $animate#leave
572
+ * @kind function
573
+ *
574
+ * @description
575
+ * Runs the leave animation operation and, upon completion, removes the element from the DOM. Once
576
+ * the animation is started, the following CSS classes will be added for the duration of the animation:
577
+ *
578
+ * Below is a breakdown of each step that occurs during leave animation:
579
+ *
580
+ * | Animation Step | What the element class attribute looks like |
581
+ * |----------------------------------------------------------------------------------------------|---------------------------------------------|
582
+ * | 1. $animate.leave(...) is called | class="my-animation" |
583
+ * | 2. $animate runs any JavaScript-defined animations on the element | class="my-animation ng-animate" |
584
+ * | 3. the .ng-leave class is added to the element | class="my-animation ng-animate ng-leave" |
585
+ * | 4. $animate scans the element styles to get the CSS transition/animation duration and delay | class="my-animation ng-animate ng-leave" |
586
+ * | 5. $animate waits for 10ms (this performs a reflow) | class="my-animation ng-animate ng-leave" |
587
+ * | 6. the .ng-leave-active and .ng-animate-active classes is added (this triggers the CSS transition/animation) | class="my-animation ng-animate ng-animate-active ng-leave ng-leave-active" |
588
+ * | 7. $animate waits for X milliseconds for the animation to complete | class="my-animation ng-animate ng-animate-active ng-leave ng-leave-active" |
589
+ * | 8. The animation ends and all generated CSS classes are removed from the element | class="my-animation" |
590
+ * | 9. The element is removed from the DOM | ... |
591
+ * | 10. The doneCallback() callback is fired (if provided) | ... |
592
+ *
593
+ * @param {DOMElement} element the element that will be the focus of the leave animation
594
+ * @param {function()=} doneCallback the callback function that will be called once the animation is complete
595
+ */
596
+ leave : function(element, doneCallback) {
597
+ element = angular.element(element);
598
+ cancelChildAnimations(element);
599
+ this.enabled(false, element);
600
+ $rootScope.$$postDigest(function() {
601
+ performAnimation('leave', 'ng-leave', stripCommentsFromElement(element), null, null, function() {
602
+ $delegate.leave(element);
603
+ }, doneCallback);
604
+ });
605
+ },
606
+
607
+ /**
608
+ * @ngdoc method
609
+ * @name $animate#move
610
+ * @kind function
611
+ *
612
+ * @description
613
+ * Fires the move DOM operation. Just before the animation starts, the animate service will either append it into the parentElement container or
614
+ * add the element directly after the afterElement element if present. Then the move animation will be run. Once
615
+ * the animation is started, the following CSS classes will be added for the duration of the animation:
616
+ *
617
+ * Below is a breakdown of each step that occurs during move animation:
618
+ *
619
+ * | Animation Step | What the element class attribute looks like |
620
+ * |----------------------------------------------------------------------------------------------|---------------------------------------------|
621
+ * | 1. $animate.move(...) is called | class="my-animation" |
622
+ * | 2. element is moved into the parentElement element or beside the afterElement element | class="my-animation" |
623
+ * | 3. $animate runs any JavaScript-defined animations on the element | class="my-animation ng-animate" |
624
+ * | 4. the .ng-move class is added to the element | class="my-animation ng-animate ng-move" |
625
+ * | 5. $animate scans the element styles to get the CSS transition/animation duration and delay | class="my-animation ng-animate ng-move" |
626
+ * | 6. $animate waits for 10ms (this performs a reflow) | class="my-animation ng-animate ng-move" |
627
+ * | 7. the .ng-move-active and .ng-animate-active classes is added (this triggers the CSS transition/animation) | class="my-animation ng-animate ng-animate-active ng-move ng-move-active" |
628
+ * | 8. $animate waits for X milliseconds for the animation to complete | class="my-animation ng-animate ng-animate-active ng-move ng-move-active" |
629
+ * | 9. The animation ends and all generated CSS classes are removed from the element | class="my-animation" |
630
+ * | 10. The doneCallback() callback is fired (if provided) | class="my-animation" |
631
+ *
632
+ * @param {DOMElement} element the element that will be the focus of the move animation
633
+ * @param {DOMElement} parentElement the parentElement element of the element that will be the focus of the move animation
634
+ * @param {DOMElement} afterElement the sibling element (which is the previous element) of the element that will be the focus of the move animation
635
+ * @param {function()=} doneCallback the callback function that will be called once the animation is complete
636
+ */
637
+ move : function(element, parentElement, afterElement, doneCallback) {
638
+ element = angular.element(element);
639
+ parentElement = prepareElement(parentElement);
640
+ afterElement = prepareElement(afterElement);
641
+
642
+ cancelChildAnimations(element);
643
+ this.enabled(false, element);
644
+ $delegate.move(element, parentElement, afterElement);
645
+ $rootScope.$$postDigest(function() {
646
+ element = stripCommentsFromElement(element);
647
+ performAnimation('move', 'ng-move', element, parentElement, afterElement, noop, doneCallback);
648
+ });
649
+ },
650
+
651
+ /**
652
+ * @ngdoc method
653
+ * @name $animate#addClass
654
+ *
655
+ * @description
656
+ * Triggers a custom animation event based off the className variable and then attaches the className value to the element as a CSS class.
657
+ * Unlike the other animation methods, the animate service will suffix the className value with {@type -add} in order to provide
658
+ * the animate service the setup and active CSS classes in order to trigger the animation (this will be skipped if no CSS transitions
659
+ * or keyframes are defined on the -add or base CSS class).
660
+ *
661
+ * Below is a breakdown of each step that occurs during addClass animation:
662
+ *
663
+ * | Animation Step | What the element class attribute looks like |
664
+ * |------------------------------------------------------------------------------------------------|---------------------------------------------|
665
+ * | 1. $animate.addClass(element, 'super') is called | class="my-animation" |
666
+ * | 2. $animate runs any JavaScript-defined animations on the element | class="my-animation ng-animate" |
667
+ * | 3. the .super-add class are added to the element | class="my-animation ng-animate super-add" |
668
+ * | 4. $animate scans the element styles to get the CSS transition/animation duration and delay | class="my-animation ng-animate super-add" |
669
+ * | 5. $animate waits for 10ms (this performs a reflow) | class="my-animation ng-animate super-add" |
670
+ * | 6. the .super, .super-add-active and .ng-animate-active classes are added (this triggers the CSS transition/animation) | class="my-animation ng-animate ng-animate-active super super-add super-add-active" |
671
+ * | 7. $animate waits for X milliseconds for the animation to complete | class="my-animation super super-add super-add-active" |
672
+ * | 8. The animation ends and all generated CSS classes are removed from the element | class="my-animation super" |
673
+ * | 9. The super class is kept on the element | class="my-animation super" |
674
+ * | 10. The doneCallback() callback is fired (if provided) | class="my-animation super" |
675
+ *
676
+ * @param {DOMElement} element the element that will be animated
677
+ * @param {string} className the CSS class that will be added to the element and then animated
678
+ * @param {function()=} doneCallback the callback function that will be called once the animation is complete
679
+ */
680
+ addClass : function(element, className, doneCallback) {
681
+ element = angular.element(element);
682
+ element = stripCommentsFromElement(element);
683
+ performAnimation('addClass', className, element, null, null, function() {
684
+ $delegate.addClass(element, className);
685
+ }, doneCallback);
686
+ },
687
+
688
+ /**
689
+ * @ngdoc method
690
+ * @name $animate#removeClass
691
+ *
692
+ * @description
693
+ * Triggers a custom animation event based off the className variable and then removes the CSS class provided by the className value
694
+ * from the element. Unlike the other animation methods, the animate service will suffix the className value with {@type -remove} in
695
+ * order to provide the animate service the setup and active CSS classes in order to trigger the animation (this will be skipped if
696
+ * no CSS transitions or keyframes are defined on the -remove or base CSS classes).
697
+ *
698
+ * Below is a breakdown of each step that occurs during removeClass animation:
699
+ *
700
+ * | Animation Step | What the element class attribute looks like |
701
+ * |-----------------------------------------------------------------------------------------------|---------------------------------------------|
702
+ * | 1. $animate.removeClass(element, 'super') is called | class="my-animation super" |
703
+ * | 2. $animate runs any JavaScript-defined animations on the element | class="my-animation super ng-animate" |
704
+ * | 3. the .super-remove class are added to the element | class="my-animation super ng-animate super-remove"|
705
+ * | 4. $animate scans the element styles to get the CSS transition/animation duration and delay | class="my-animation super ng-animate super-remove" |
706
+ * | 5. $animate waits for 10ms (this performs a reflow) | class="my-animation super ng-animate super-remove" |
707
+ * | 6. the .super-remove-active and .ng-animate-active classes are added and .super is removed (this triggers the CSS transition/animation) | class="my-animation ng-animate ng-animate-active super-remove super-remove-active" |
708
+ * | 7. $animate waits for X milliseconds for the animation to complete | class="my-animation ng-animate ng-animate-active super-remove super-remove-active" |
709
+ * | 8. The animation ends and all generated CSS classes are removed from the element | class="my-animation" |
710
+ * | 9. The doneCallback() callback is fired (if provided) | class="my-animation" |
711
+ *
712
+ *
713
+ * @param {DOMElement} element the element that will be animated
714
+ * @param {string} className the CSS class that will be animated and then removed from the element
715
+ * @param {function()=} doneCallback the callback function that will be called once the animation is complete
716
+ */
717
+ removeClass : function(element, className, doneCallback) {
718
+ element = angular.element(element);
719
+ element = stripCommentsFromElement(element);
720
+ performAnimation('removeClass', className, element, null, null, function() {
721
+ $delegate.removeClass(element, className);
722
+ }, doneCallback);
723
+ },
724
+
725
+ /**
726
+ *
727
+ * @ngdoc function
728
+ * @name $animate#setClass
729
+ * @function
730
+ * @description Adds and/or removes the given CSS classes to and from the element.
731
+ * Once complete, the done() callback will be fired (if provided).
732
+ * @param {DOMElement} element the element which will its CSS classes changed
733
+ * removed from it
734
+ * @param {string} add the CSS classes which will be added to the element
735
+ * @param {string} remove the CSS class which will be removed from the element
736
+ * @param {Function=} done the callback function (if provided) that will be fired after the
737
+ * CSS classes have been set on the element
738
+ */
739
+ setClass : function(element, add, remove, doneCallback) {
740
+ element = angular.element(element);
741
+ element = stripCommentsFromElement(element);
742
+ performAnimation('setClass', [add, remove], element, null, null, function() {
743
+ $delegate.setClass(element, add, remove);
744
+ }, doneCallback);
745
+ },
746
+
747
+ /**
748
+ * @ngdoc method
749
+ * @name $animate#enabled
750
+ * @kind function
751
+ *
752
+ * @param {boolean=} value If provided then set the animation on or off.
753
+ * @param {DOMElement=} element If provided then the element will be used to represent the enable/disable operation
754
+ * @return {boolean} Current animation state.
755
+ *
756
+ * @description
757
+ * Globally enables/disables animations.
758
+ *
759
+ */
760
+ enabled : function(value, element) {
761
+ switch(arguments.length) {
762
+ case 2:
763
+ if(value) {
764
+ cleanup(element);
765
+ } else {
766
+ var data = element.data(NG_ANIMATE_STATE) || {};
767
+ data.disabled = true;
768
+ element.data(NG_ANIMATE_STATE, data);
769
+ }
770
+ break;
771
+
772
+ case 1:
773
+ rootAnimateState.disabled = !value;
774
+ break;
775
+
776
+ default:
777
+ value = !rootAnimateState.disabled;
778
+ break;
779
+ }
780
+ return !!value;
781
+ }
782
+ };
783
+
784
+ /*
785
+ all animations call this shared animation triggering function internally.
786
+ The animationEvent variable refers to the JavaScript animation event that will be triggered
787
+ and the className value is the name of the animation that will be applied within the
788
+ CSS code. Element, parentElement and afterElement are provided DOM elements for the animation
789
+ and the onComplete callback will be fired once the animation is fully complete.
790
+ */
791
+ function performAnimation(animationEvent, className, element, parentElement, afterElement, domOperation, doneCallback) {
792
+
793
+ var runner = animationRunner(element, animationEvent, className);
794
+ if(!runner) {
795
+ fireDOMOperation();
796
+ fireBeforeCallbackAsync();
797
+ fireAfterCallbackAsync();
798
+ closeAnimation();
799
+ return;
800
+ }
801
+
802
+ className = runner.className;
803
+ var elementEvents = angular.element._data(runner.node);
804
+ elementEvents = elementEvents && elementEvents.events;
805
+
806
+ if (!parentElement) {
807
+ parentElement = afterElement ? afterElement.parent() : element.parent();
808
+ }
809
+
810
+ var ngAnimateState = element.data(NG_ANIMATE_STATE) || {};
811
+ var runningAnimations = ngAnimateState.active || {};
812
+ var totalActiveAnimations = ngAnimateState.totalActive || 0;
813
+ var lastAnimation = ngAnimateState.last;
814
+
815
+ //only allow animations if the currently running animation is not structural
816
+ //or if there is no animation running at all
817
+ var skipAnimations = runner.isClassBased ?
818
+ ngAnimateState.disabled || (lastAnimation && !lastAnimation.isClassBased) :
819
+ false;
820
+
821
+ //skip the animation if animations are disabled, a parent is already being animated,
822
+ //the element is not currently attached to the document body or then completely close
823
+ //the animation if any matching animations are not found at all.
824
+ //NOTE: IE8 + IE9 should close properly (run closeAnimation()) in case an animation was found.
825
+ if (skipAnimations || animationsDisabled(element, parentElement)) {
826
+ fireDOMOperation();
827
+ fireBeforeCallbackAsync();
828
+ fireAfterCallbackAsync();
829
+ closeAnimation();
830
+ return;
831
+ }
832
+
833
+ var skipAnimation = false;
834
+ if(totalActiveAnimations > 0) {
835
+ var animationsToCancel = [];
836
+ if(!runner.isClassBased) {
837
+ if(animationEvent == 'leave' && runningAnimations['ng-leave']) {
838
+ skipAnimation = true;
839
+ } else {
840
+ //cancel all animations when a structural animation takes place
841
+ for(var klass in runningAnimations) {
842
+ animationsToCancel.push(runningAnimations[klass]);
843
+ cleanup(element, klass);
844
+ }
845
+ runningAnimations = {};
846
+ totalActiveAnimations = 0;
847
+ }
848
+ } else if(lastAnimation.event == 'setClass') {
849
+ animationsToCancel.push(lastAnimation);
850
+ cleanup(element, className);
851
+ }
852
+ else if(runningAnimations[className]) {
853
+ var current = runningAnimations[className];
854
+ if(current.event == animationEvent) {
855
+ skipAnimation = true;
856
+ } else {
857
+ animationsToCancel.push(current);
858
+ cleanup(element, className);
859
+ }
860
+ }
861
+
862
+ if(animationsToCancel.length > 0) {
863
+ forEach(animationsToCancel, function(operation) {
864
+ operation.cancel();
865
+ });
866
+ }
867
+ }
868
+
869
+ if(runner.isClassBased && !runner.isSetClassOperation && !skipAnimation) {
870
+ skipAnimation = (animationEvent == 'addClass') == element.hasClass(className); //opposite of XOR
871
+ }
872
+
873
+ if(skipAnimation) {
874
+ fireDOMOperation();
875
+ fireBeforeCallbackAsync();
876
+ fireAfterCallbackAsync();
877
+ fireDoneCallbackAsync();
878
+ return;
879
+ }
880
+
881
+ if(animationEvent == 'leave') {
882
+ //there's no need to ever remove the listener since the element
883
+ //will be removed (destroyed) after the leave animation ends or
884
+ //is cancelled midway
885
+ element.one('$destroy', function(e) {
886
+ var element = angular.element(this);
887
+ var state = element.data(NG_ANIMATE_STATE);
888
+ if(state) {
889
+ var activeLeaveAnimation = state.active['ng-leave'];
890
+ if(activeLeaveAnimation) {
891
+ activeLeaveAnimation.cancel();
892
+ cleanup(element, 'ng-leave');
893
+ }
894
+ }
895
+ });
896
+ }
897
+
898
+ //the ng-animate class does nothing, but it's here to allow for
899
+ //parent animations to find and cancel child animations when needed
900
+ element.addClass(NG_ANIMATE_CLASS_NAME);
901
+
902
+ var localAnimationCount = globalAnimationCounter++;
903
+ totalActiveAnimations++;
904
+ runningAnimations[className] = runner;
905
+
906
+ element.data(NG_ANIMATE_STATE, {
907
+ last : runner,
908
+ active : runningAnimations,
909
+ index : localAnimationCount,
910
+ totalActive : totalActiveAnimations
911
+ });
912
+
913
+ //first we run the before animations and when all of those are complete
914
+ //then we perform the DOM operation and run the next set of animations
915
+ fireBeforeCallbackAsync();
916
+ runner.before(function(cancelled) {
917
+ var data = element.data(NG_ANIMATE_STATE);
918
+ cancelled = cancelled ||
919
+ !data || !data.active[className] ||
920
+ (runner.isClassBased && data.active[className].event != animationEvent);
921
+
922
+ fireDOMOperation();
923
+ if(cancelled === true) {
924
+ closeAnimation();
925
+ } else {
926
+ fireAfterCallbackAsync();
927
+ runner.after(closeAnimation);
928
+ }
929
+ });
930
+
931
+ function fireDOMCallback(animationPhase) {
932
+ var eventName = '$animate:' + animationPhase;
933
+ if(elementEvents && elementEvents[eventName] && elementEvents[eventName].length > 0) {
934
+ $$asyncCallback(function() {
935
+ element.triggerHandler(eventName, {
936
+ event : animationEvent,
937
+ className : className
938
+ });
939
+ });
940
+ }
941
+ }
942
+
943
+ function fireBeforeCallbackAsync() {
944
+ fireDOMCallback('before');
945
+ }
946
+
947
+ function fireAfterCallbackAsync() {
948
+ fireDOMCallback('after');
949
+ }
950
+
951
+ function fireDoneCallbackAsync() {
952
+ fireDOMCallback('close');
953
+ if(doneCallback) {
954
+ $$asyncCallback(function() {
955
+ doneCallback();
956
+ });
957
+ }
958
+ }
959
+
960
+ //it is less complicated to use a flag than managing and canceling
961
+ //timeouts containing multiple callbacks.
962
+ function fireDOMOperation() {
963
+ if(!fireDOMOperation.hasBeenRun) {
964
+ fireDOMOperation.hasBeenRun = true;
965
+ domOperation();
966
+ }
967
+ }
968
+
969
+ function closeAnimation() {
970
+ if(!closeAnimation.hasBeenRun) {
971
+ closeAnimation.hasBeenRun = true;
972
+ var data = element.data(NG_ANIMATE_STATE);
973
+ if(data) {
974
+ /* only structural animations wait for reflow before removing an
975
+ animation, but class-based animations don't. An example of this
976
+ failing would be when a parent HTML tag has a ng-class attribute
977
+ causing ALL directives below to skip animations during the digest */
978
+ if(runner && runner.isClassBased) {
979
+ cleanup(element, className);
980
+ } else {
981
+ $$asyncCallback(function() {
982
+ var data = element.data(NG_ANIMATE_STATE) || {};
983
+ if(localAnimationCount == data.index) {
984
+ cleanup(element, className, animationEvent);
985
+ }
986
+ });
987
+ element.data(NG_ANIMATE_STATE, data);
988
+ }
989
+ }
990
+ fireDoneCallbackAsync();
991
+ }
992
+ }
993
+ }
994
+
995
+ function cancelChildAnimations(element) {
996
+ var node = extractElementNode(element);
997
+ if (node) {
998
+ var nodes = angular.isFunction(node.getElementsByClassName) ?
999
+ node.getElementsByClassName(NG_ANIMATE_CLASS_NAME) :
1000
+ node.querySelectorAll('.' + NG_ANIMATE_CLASS_NAME);
1001
+ forEach(nodes, function(element) {
1002
+ element = angular.element(element);
1003
+ var data = element.data(NG_ANIMATE_STATE);
1004
+ if(data && data.active) {
1005
+ forEach(data.active, function(runner) {
1006
+ runner.cancel();
1007
+ });
1008
+ }
1009
+ });
1010
+ }
1011
+ }
1012
+
1013
+ function cleanup(element, className) {
1014
+ if(isMatchingElement(element, $rootElement)) {
1015
+ if(!rootAnimateState.disabled) {
1016
+ rootAnimateState.running = false;
1017
+ rootAnimateState.structural = false;
1018
+ }
1019
+ } else if(className) {
1020
+ var data = element.data(NG_ANIMATE_STATE) || {};
1021
+
1022
+ var removeAnimations = className === true;
1023
+ if(!removeAnimations && data.active && data.active[className]) {
1024
+ data.totalActive--;
1025
+ delete data.active[className];
1026
+ }
1027
+
1028
+ if(removeAnimations || !data.totalActive) {
1029
+ element.removeClass(NG_ANIMATE_CLASS_NAME);
1030
+ element.removeData(NG_ANIMATE_STATE);
1031
+ }
1032
+ }
1033
+ }
1034
+
1035
+ function animationsDisabled(element, parentElement) {
1036
+ if (rootAnimateState.disabled) return true;
1037
+
1038
+ if(isMatchingElement(element, $rootElement)) {
1039
+ return rootAnimateState.disabled || rootAnimateState.running;
1040
+ }
1041
+
1042
+ do {
1043
+ //the element did not reach the root element which means that it
1044
+ //is not apart of the DOM. Therefore there is no reason to do
1045
+ //any animations on it
1046
+ if(parentElement.length === 0) break;
1047
+
1048
+ var isRoot = isMatchingElement(parentElement, $rootElement);
1049
+ var state = isRoot ? rootAnimateState : parentElement.data(NG_ANIMATE_STATE);
1050
+ var result = state && (!!state.disabled || state.running || state.totalActive > 0);
1051
+ if(isRoot || result) {
1052
+ return result;
1053
+ }
1054
+
1055
+ if(isRoot) return true;
1056
+ }
1057
+ while(parentElement = parentElement.parent());
1058
+
1059
+ return true;
1060
+ }
1061
+ }]);
1062
+
1063
+ $animateProvider.register('', ['$window', '$sniffer', '$timeout', '$$animateReflow',
1064
+ function($window, $sniffer, $timeout, $$animateReflow) {
1065
+ // Detect proper transitionend/animationend event names.
1066
+ var CSS_PREFIX = '', TRANSITION_PROP, TRANSITIONEND_EVENT, ANIMATION_PROP, ANIMATIONEND_EVENT;
1067
+
1068
+ // If unprefixed events are not supported but webkit-prefixed are, use the latter.
1069
+ // Otherwise, just use W3C names, browsers not supporting them at all will just ignore them.
1070
+ // Note: Chrome implements `window.onwebkitanimationend` and doesn't implement `window.onanimationend`
1071
+ // but at the same time dispatches the `animationend` event and not `webkitAnimationEnd`.
1072
+ // Register both events in case `window.onanimationend` is not supported because of that,
1073
+ // do the same for `transitionend` as Safari is likely to exhibit similar behavior.
1074
+ // Also, the only modern browser that uses vendor prefixes for transitions/keyframes is webkit
1075
+ // therefore there is no reason to test anymore for other vendor prefixes: http://caniuse.com/#search=transition
1076
+ if (window.ontransitionend === undefined && window.onwebkittransitionend !== undefined) {
1077
+ CSS_PREFIX = '-webkit-';
1078
+ TRANSITION_PROP = 'WebkitTransition';
1079
+ TRANSITIONEND_EVENT = 'webkitTransitionEnd transitionend';
1080
+ } else {
1081
+ TRANSITION_PROP = 'transition';
1082
+ TRANSITIONEND_EVENT = 'transitionend';
1083
+ }
1084
+
1085
+ if (window.onanimationend === undefined && window.onwebkitanimationend !== undefined) {
1086
+ CSS_PREFIX = '-webkit-';
1087
+ ANIMATION_PROP = 'WebkitAnimation';
1088
+ ANIMATIONEND_EVENT = 'webkitAnimationEnd animationend';
1089
+ } else {
1090
+ ANIMATION_PROP = 'animation';
1091
+ ANIMATIONEND_EVENT = 'animationend';
1092
+ }
1093
+
1094
+ var DURATION_KEY = 'Duration';
1095
+ var PROPERTY_KEY = 'Property';
1096
+ var DELAY_KEY = 'Delay';
1097
+ var ANIMATION_ITERATION_COUNT_KEY = 'IterationCount';
1098
+ var NG_ANIMATE_PARENT_KEY = '$$ngAnimateKey';
1099
+ var NG_ANIMATE_CSS_DATA_KEY = '$$ngAnimateCSS3Data';
1100
+ var NG_ANIMATE_BLOCK_CLASS_NAME = 'ng-animate-block-transitions';
1101
+ var ELAPSED_TIME_MAX_DECIMAL_PLACES = 3;
1102
+ var CLOSING_TIME_BUFFER = 1.5;
1103
+ var ONE_SECOND = 1000;
1104
+
1105
+ var lookupCache = {};
1106
+ var parentCounter = 0;
1107
+ var animationReflowQueue = [];
1108
+ var cancelAnimationReflow;
1109
+ function afterReflow(element, callback) {
1110
+ if(cancelAnimationReflow) {
1111
+ cancelAnimationReflow();
1112
+ }
1113
+ animationReflowQueue.push(callback);
1114
+ cancelAnimationReflow = $$animateReflow(function() {
1115
+ forEach(animationReflowQueue, function(fn) {
1116
+ fn();
1117
+ });
1118
+
1119
+ animationReflowQueue = [];
1120
+ cancelAnimationReflow = null;
1121
+ lookupCache = {};
1122
+ });
1123
+ }
1124
+
1125
+ var closingTimer = null;
1126
+ var closingTimestamp = 0;
1127
+ var animationElementQueue = [];
1128
+ function animationCloseHandler(element, totalTime) {
1129
+ var node = extractElementNode(element);
1130
+ element = angular.element(node);
1131
+
1132
+ //this item will be garbage collected by the closing
1133
+ //animation timeout
1134
+ animationElementQueue.push(element);
1135
+
1136
+ //but it may not need to cancel out the existing timeout
1137
+ //if the timestamp is less than the previous one
1138
+ var futureTimestamp = Date.now() + totalTime;
1139
+ if(futureTimestamp <= closingTimestamp) {
1140
+ return;
1141
+ }
1142
+
1143
+ $timeout.cancel(closingTimer);
1144
+
1145
+ closingTimestamp = futureTimestamp;
1146
+ closingTimer = $timeout(function() {
1147
+ closeAllAnimations(animationElementQueue);
1148
+ animationElementQueue = [];
1149
+ }, totalTime, false);
1150
+ }
1151
+
1152
+ function closeAllAnimations(elements) {
1153
+ forEach(elements, function(element) {
1154
+ var elementData = element.data(NG_ANIMATE_CSS_DATA_KEY);
1155
+ if(elementData) {
1156
+ (elementData.closeAnimationFn || noop)();
1157
+ }
1158
+ });
1159
+ }
1160
+
1161
+ function getElementAnimationDetails(element, cacheKey) {
1162
+ var data = cacheKey ? lookupCache[cacheKey] : null;
1163
+ if(!data) {
1164
+ var transitionDuration = 0;
1165
+ var transitionDelay = 0;
1166
+ var animationDuration = 0;
1167
+ var animationDelay = 0;
1168
+ var transitionDelayStyle;
1169
+ var animationDelayStyle;
1170
+ var transitionDurationStyle;
1171
+ var transitionPropertyStyle;
1172
+
1173
+ //we want all the styles defined before and after
1174
+ forEach(element, function(element) {
1175
+ if (element.nodeType == ELEMENT_NODE) {
1176
+ var elementStyles = $window.getComputedStyle(element) || {};
1177
+
1178
+ transitionDurationStyle = elementStyles[TRANSITION_PROP + DURATION_KEY];
1179
+
1180
+ transitionDuration = Math.max(parseMaxTime(transitionDurationStyle), transitionDuration);
1181
+
1182
+ transitionPropertyStyle = elementStyles[TRANSITION_PROP + PROPERTY_KEY];
1183
+
1184
+ transitionDelayStyle = elementStyles[TRANSITION_PROP + DELAY_KEY];
1185
+
1186
+ transitionDelay = Math.max(parseMaxTime(transitionDelayStyle), transitionDelay);
1187
+
1188
+ animationDelayStyle = elementStyles[ANIMATION_PROP + DELAY_KEY];
1189
+
1190
+ animationDelay = Math.max(parseMaxTime(animationDelayStyle), animationDelay);
1191
+
1192
+ var aDuration = parseMaxTime(elementStyles[ANIMATION_PROP + DURATION_KEY]);
1193
+
1194
+ if(aDuration > 0) {
1195
+ aDuration *= parseInt(elementStyles[ANIMATION_PROP + ANIMATION_ITERATION_COUNT_KEY], 10) || 1;
1196
+ }
1197
+
1198
+ animationDuration = Math.max(aDuration, animationDuration);
1199
+ }
1200
+ });
1201
+ data = {
1202
+ total : 0,
1203
+ transitionPropertyStyle: transitionPropertyStyle,
1204
+ transitionDurationStyle: transitionDurationStyle,
1205
+ transitionDelayStyle: transitionDelayStyle,
1206
+ transitionDelay: transitionDelay,
1207
+ transitionDuration: transitionDuration,
1208
+ animationDelayStyle: animationDelayStyle,
1209
+ animationDelay: animationDelay,
1210
+ animationDuration: animationDuration
1211
+ };
1212
+ if(cacheKey) {
1213
+ lookupCache[cacheKey] = data;
1214
+ }
1215
+ }
1216
+ return data;
1217
+ }
1218
+
1219
+ function parseMaxTime(str) {
1220
+ var maxValue = 0;
1221
+ var values = angular.isString(str) ?
1222
+ str.split(/\s*,\s*/) :
1223
+ [];
1224
+ forEach(values, function(value) {
1225
+ maxValue = Math.max(parseFloat(value) || 0, maxValue);
1226
+ });
1227
+ return maxValue;
1228
+ }
1229
+
1230
+ function getCacheKey(element) {
1231
+ var parentElement = element.parent();
1232
+ var parentID = parentElement.data(NG_ANIMATE_PARENT_KEY);
1233
+ if(!parentID) {
1234
+ parentElement.data(NG_ANIMATE_PARENT_KEY, ++parentCounter);
1235
+ parentID = parentCounter;
1236
+ }
1237
+ return parentID + '-' + extractElementNode(element).getAttribute('class');
1238
+ }
1239
+
1240
+ function animateSetup(animationEvent, element, className, calculationDecorator) {
1241
+ var cacheKey = getCacheKey(element);
1242
+ var eventCacheKey = cacheKey + ' ' + className;
1243
+ var itemIndex = lookupCache[eventCacheKey] ? ++lookupCache[eventCacheKey].total : 0;
1244
+
1245
+ var stagger = {};
1246
+ if(itemIndex > 0) {
1247
+ var staggerClassName = className + '-stagger';
1248
+ var staggerCacheKey = cacheKey + ' ' + staggerClassName;
1249
+ var applyClasses = !lookupCache[staggerCacheKey];
1250
+
1251
+ applyClasses && element.addClass(staggerClassName);
1252
+
1253
+ stagger = getElementAnimationDetails(element, staggerCacheKey);
1254
+
1255
+ applyClasses && element.removeClass(staggerClassName);
1256
+ }
1257
+
1258
+ /* the animation itself may need to add/remove special CSS classes
1259
+ * before calculating the anmation styles */
1260
+ calculationDecorator = calculationDecorator ||
1261
+ function(fn) { return fn(); };
1262
+
1263
+ element.addClass(className);
1264
+
1265
+ var formerData = element.data(NG_ANIMATE_CSS_DATA_KEY) || {};
1266
+
1267
+ var timings = calculationDecorator(function() {
1268
+ return getElementAnimationDetails(element, eventCacheKey);
1269
+ });
1270
+
1271
+ var transitionDuration = timings.transitionDuration;
1272
+ var animationDuration = timings.animationDuration;
1273
+ if(transitionDuration === 0 && animationDuration === 0) {
1274
+ element.removeClass(className);
1275
+ return false;
1276
+ }
1277
+
1278
+ element.data(NG_ANIMATE_CSS_DATA_KEY, {
1279
+ running : formerData.running || 0,
1280
+ itemIndex : itemIndex,
1281
+ stagger : stagger,
1282
+ timings : timings,
1283
+ closeAnimationFn : noop
1284
+ });
1285
+
1286
+ //temporarily disable the transition so that the enter styles
1287
+ //don't animate twice (this is here to avoid a bug in Chrome/FF).
1288
+ var isCurrentlyAnimating = formerData.running > 0 || animationEvent == 'setClass';
1289
+ if(transitionDuration > 0) {
1290
+ blockTransitions(element, className, isCurrentlyAnimating);
1291
+ }
1292
+
1293
+ //staggering keyframe animations work by adjusting the `animation-delay` CSS property
1294
+ //on the given element, however, the delay value can only calculated after the reflow
1295
+ //since by that time $animate knows how many elements are being animated. Therefore,
1296
+ //until the reflow occurs the element needs to be blocked (where the keyframe animation
1297
+ //is set to `none 0s`). This blocking mechanism should only be set for when a stagger
1298
+ //animation is detected and when the element item index is greater than 0.
1299
+ if(animationDuration > 0 && stagger.animationDelay > 0 && stagger.animationDuration === 0) {
1300
+ blockKeyframeAnimations(element);
1301
+ }
1302
+
1303
+ return true;
1304
+ }
1305
+
1306
+ function isStructuralAnimation(className) {
1307
+ return className == 'ng-enter' || className == 'ng-move' || className == 'ng-leave';
1308
+ }
1309
+
1310
+ function blockTransitions(element, className, isAnimating) {
1311
+ if(isStructuralAnimation(className) || !isAnimating) {
1312
+ extractElementNode(element).style[TRANSITION_PROP + PROPERTY_KEY] = 'none';
1313
+ } else {
1314
+ element.addClass(NG_ANIMATE_BLOCK_CLASS_NAME);
1315
+ }
1316
+ }
1317
+
1318
+ function blockKeyframeAnimations(element) {
1319
+ extractElementNode(element).style[ANIMATION_PROP] = 'none 0s';
1320
+ }
1321
+
1322
+ function unblockTransitions(element, className) {
1323
+ var prop = TRANSITION_PROP + PROPERTY_KEY;
1324
+ var node = extractElementNode(element);
1325
+ if(node.style[prop] && node.style[prop].length > 0) {
1326
+ node.style[prop] = '';
1327
+ }
1328
+ element.removeClass(NG_ANIMATE_BLOCK_CLASS_NAME);
1329
+ }
1330
+
1331
+ function unblockKeyframeAnimations(element) {
1332
+ var prop = ANIMATION_PROP;
1333
+ var node = extractElementNode(element);
1334
+ if(node.style[prop] && node.style[prop].length > 0) {
1335
+ node.style[prop] = '';
1336
+ }
1337
+ }
1338
+
1339
+ function animateRun(animationEvent, element, className, activeAnimationComplete) {
1340
+ var node = extractElementNode(element);
1341
+ var elementData = element.data(NG_ANIMATE_CSS_DATA_KEY);
1342
+ if(node.getAttribute('class').indexOf(className) == -1 || !elementData) {
1343
+ activeAnimationComplete();
1344
+ return;
1345
+ }
1346
+
1347
+ var activeClassName = '';
1348
+ forEach(className.split(' '), function(klass, i) {
1349
+ activeClassName += (i > 0 ? ' ' : '') + klass + '-active';
1350
+ });
1351
+
1352
+ var stagger = elementData.stagger;
1353
+ var timings = elementData.timings;
1354
+ var itemIndex = elementData.itemIndex;
1355
+ var maxDuration = Math.max(timings.transitionDuration, timings.animationDuration);
1356
+ var maxDelay = Math.max(timings.transitionDelay, timings.animationDelay);
1357
+ var maxDelayTime = maxDelay * ONE_SECOND;
1358
+
1359
+ var startTime = Date.now();
1360
+ var css3AnimationEvents = ANIMATIONEND_EVENT + ' ' + TRANSITIONEND_EVENT;
1361
+
1362
+ var style = '', appliedStyles = [];
1363
+ if(timings.transitionDuration > 0) {
1364
+ var propertyStyle = timings.transitionPropertyStyle;
1365
+ if(propertyStyle.indexOf('all') == -1) {
1366
+ style += CSS_PREFIX + 'transition-property: ' + propertyStyle + ';';
1367
+ style += CSS_PREFIX + 'transition-duration: ' + timings.transitionDurationStyle + ';';
1368
+ appliedStyles.push(CSS_PREFIX + 'transition-property');
1369
+ appliedStyles.push(CSS_PREFIX + 'transition-duration');
1370
+ }
1371
+ }
1372
+
1373
+ if(itemIndex > 0) {
1374
+ if(stagger.transitionDelay > 0 && stagger.transitionDuration === 0) {
1375
+ var delayStyle = timings.transitionDelayStyle;
1376
+ style += CSS_PREFIX + 'transition-delay: ' +
1377
+ prepareStaggerDelay(delayStyle, stagger.transitionDelay, itemIndex) + '; ';
1378
+ appliedStyles.push(CSS_PREFIX + 'transition-delay');
1379
+ }
1380
+
1381
+ if(stagger.animationDelay > 0 && stagger.animationDuration === 0) {
1382
+ style += CSS_PREFIX + 'animation-delay: ' +
1383
+ prepareStaggerDelay(timings.animationDelayStyle, stagger.animationDelay, itemIndex) + '; ';
1384
+ appliedStyles.push(CSS_PREFIX + 'animation-delay');
1385
+ }
1386
+ }
1387
+
1388
+ if(appliedStyles.length > 0) {
1389
+ //the element being animated may sometimes contain comment nodes in
1390
+ //the jqLite object, so we're safe to use a single variable to house
1391
+ //the styles since there is always only one element being animated
1392
+ var oldStyle = node.getAttribute('style') || '';
1393
+ node.setAttribute('style', oldStyle + '; ' + style);
1394
+ }
1395
+
1396
+ element.on(css3AnimationEvents, onAnimationProgress);
1397
+ element.addClass(activeClassName);
1398
+ elementData.closeAnimationFn = function() {
1399
+ onEnd();
1400
+ activeAnimationComplete();
1401
+ };
1402
+
1403
+ var staggerTime = itemIndex * (Math.max(stagger.animationDelay, stagger.transitionDelay) || 0);
1404
+ var animationTime = (maxDelay + maxDuration) * CLOSING_TIME_BUFFER;
1405
+ var totalTime = (staggerTime + animationTime) * ONE_SECOND;
1406
+
1407
+ elementData.running++;
1408
+ animationCloseHandler(element, totalTime);
1409
+ return onEnd;
1410
+
1411
+ // This will automatically be called by $animate so
1412
+ // there is no need to attach this internally to the
1413
+ // timeout done method.
1414
+ function onEnd(cancelled) {
1415
+ element.off(css3AnimationEvents, onAnimationProgress);
1416
+ element.removeClass(activeClassName);
1417
+ animateClose(element, className);
1418
+ var node = extractElementNode(element);
1419
+ for (var i in appliedStyles) {
1420
+ node.style.removeProperty(appliedStyles[i]);
1421
+ }
1422
+ }
1423
+
1424
+ function onAnimationProgress(event) {
1425
+ event.stopPropagation();
1426
+ var ev = event.originalEvent || event;
1427
+ var timeStamp = ev.$manualTimeStamp || ev.timeStamp || Date.now();
1428
+
1429
+ /* Firefox (or possibly just Gecko) likes to not round values up
1430
+ * when a ms measurement is used for the animation */
1431
+ var elapsedTime = parseFloat(ev.elapsedTime.toFixed(ELAPSED_TIME_MAX_DECIMAL_PLACES));
1432
+
1433
+ /* $manualTimeStamp is a mocked timeStamp value which is set
1434
+ * within browserTrigger(). This is only here so that tests can
1435
+ * mock animations properly. Real events fallback to event.timeStamp,
1436
+ * or, if they don't, then a timeStamp is automatically created for them.
1437
+ * We're checking to see if the timeStamp surpasses the expected delay,
1438
+ * but we're using elapsedTime instead of the timeStamp on the 2nd
1439
+ * pre-condition since animations sometimes close off early */
1440
+ if(Math.max(timeStamp - startTime, 0) >= maxDelayTime && elapsedTime >= maxDuration) {
1441
+ activeAnimationComplete();
1442
+ }
1443
+ }
1444
+ }
1445
+
1446
+ function prepareStaggerDelay(delayStyle, staggerDelay, index) {
1447
+ var style = '';
1448
+ forEach(delayStyle.split(','), function(val, i) {
1449
+ style += (i > 0 ? ',' : '') +
1450
+ (index * staggerDelay + parseInt(val, 10)) + 's';
1451
+ });
1452
+ return style;
1453
+ }
1454
+
1455
+ function animateBefore(animationEvent, element, className, calculationDecorator) {
1456
+ if(animateSetup(animationEvent, element, className, calculationDecorator)) {
1457
+ return function(cancelled) {
1458
+ cancelled && animateClose(element, className);
1459
+ };
1460
+ }
1461
+ }
1462
+
1463
+ function animateAfter(animationEvent, element, className, afterAnimationComplete) {
1464
+ if(element.data(NG_ANIMATE_CSS_DATA_KEY)) {
1465
+ return animateRun(animationEvent, element, className, afterAnimationComplete);
1466
+ } else {
1467
+ animateClose(element, className);
1468
+ afterAnimationComplete();
1469
+ }
1470
+ }
1471
+
1472
+ function animate(animationEvent, element, className, animationComplete) {
1473
+ //If the animateSetup function doesn't bother returning a
1474
+ //cancellation function then it means that there is no animation
1475
+ //to perform at all
1476
+ var preReflowCancellation = animateBefore(animationEvent, element, className);
1477
+ if(!preReflowCancellation) {
1478
+ animationComplete();
1479
+ return;
1480
+ }
1481
+
1482
+ //There are two cancellation functions: one is before the first
1483
+ //reflow animation and the second is during the active state
1484
+ //animation. The first function will take care of removing the
1485
+ //data from the element which will not make the 2nd animation
1486
+ //happen in the first place
1487
+ var cancel = preReflowCancellation;
1488
+ afterReflow(element, function() {
1489
+ unblockTransitions(element, className);
1490
+ unblockKeyframeAnimations(element);
1491
+ //once the reflow is complete then we point cancel to
1492
+ //the new cancellation function which will remove all of the
1493
+ //animation properties from the active animation
1494
+ cancel = animateAfter(animationEvent, element, className, animationComplete);
1495
+ });
1496
+
1497
+ return function(cancelled) {
1498
+ (cancel || noop)(cancelled);
1499
+ };
1500
+ }
1501
+
1502
+ function animateClose(element, className) {
1503
+ element.removeClass(className);
1504
+ var data = element.data(NG_ANIMATE_CSS_DATA_KEY);
1505
+ if(data) {
1506
+ if(data.running) {
1507
+ data.running--;
1508
+ }
1509
+ if(!data.running || data.running === 0) {
1510
+ element.removeData(NG_ANIMATE_CSS_DATA_KEY);
1511
+ }
1512
+ }
1513
+ }
1514
+
1515
+ return {
1516
+ enter : function(element, animationCompleted) {
1517
+ return animate('enter', element, 'ng-enter', animationCompleted);
1518
+ },
1519
+
1520
+ leave : function(element, animationCompleted) {
1521
+ return animate('leave', element, 'ng-leave', animationCompleted);
1522
+ },
1523
+
1524
+ move : function(element, animationCompleted) {
1525
+ return animate('move', element, 'ng-move', animationCompleted);
1526
+ },
1527
+
1528
+ beforeSetClass : function(element, add, remove, animationCompleted) {
1529
+ var className = suffixClasses(remove, '-remove') + ' ' +
1530
+ suffixClasses(add, '-add');
1531
+ var cancellationMethod = animateBefore('setClass', element, className, function(fn) {
1532
+ /* when classes are removed from an element then the transition style
1533
+ * that is applied is the transition defined on the element without the
1534
+ * CSS class being there. This is how CSS3 functions outside of ngAnimate.
1535
+ * http://plnkr.co/edit/j8OzgTNxHTb4n3zLyjGW?p=preview */
1536
+ var klass = element.attr('class');
1537
+ element.removeClass(remove);
1538
+ element.addClass(add);
1539
+ var timings = fn();
1540
+ element.attr('class', klass);
1541
+ return timings;
1542
+ });
1543
+
1544
+ if(cancellationMethod) {
1545
+ afterReflow(element, function() {
1546
+ unblockTransitions(element, className);
1547
+ unblockKeyframeAnimations(element);
1548
+ animationCompleted();
1549
+ });
1550
+ return cancellationMethod;
1551
+ }
1552
+ animationCompleted();
1553
+ },
1554
+
1555
+ beforeAddClass : function(element, className, animationCompleted) {
1556
+ var cancellationMethod = animateBefore('addClass', element, suffixClasses(className, '-add'), function(fn) {
1557
+
1558
+ /* when a CSS class is added to an element then the transition style that
1559
+ * is applied is the transition defined on the element when the CSS class
1560
+ * is added at the time of the animation. This is how CSS3 functions
1561
+ * outside of ngAnimate. */
1562
+ element.addClass(className);
1563
+ var timings = fn();
1564
+ element.removeClass(className);
1565
+ return timings;
1566
+ });
1567
+
1568
+ if(cancellationMethod) {
1569
+ afterReflow(element, function() {
1570
+ unblockTransitions(element, className);
1571
+ unblockKeyframeAnimations(element);
1572
+ animationCompleted();
1573
+ });
1574
+ return cancellationMethod;
1575
+ }
1576
+ animationCompleted();
1577
+ },
1578
+
1579
+ setClass : function(element, add, remove, animationCompleted) {
1580
+ remove = suffixClasses(remove, '-remove');
1581
+ add = suffixClasses(add, '-add');
1582
+ var className = remove + ' ' + add;
1583
+ return animateAfter('setClass', element, className, animationCompleted);
1584
+ },
1585
+
1586
+ addClass : function(element, className, animationCompleted) {
1587
+ return animateAfter('addClass', element, suffixClasses(className, '-add'), animationCompleted);
1588
+ },
1589
+
1590
+ beforeRemoveClass : function(element, className, animationCompleted) {
1591
+ var cancellationMethod = animateBefore('removeClass', element, suffixClasses(className, '-remove'), function(fn) {
1592
+ /* when classes are removed from an element then the transition style
1593
+ * that is applied is the transition defined on the element without the
1594
+ * CSS class being there. This is how CSS3 functions outside of ngAnimate.
1595
+ * http://plnkr.co/edit/j8OzgTNxHTb4n3zLyjGW?p=preview */
1596
+ var klass = element.attr('class');
1597
+ element.removeClass(className);
1598
+ var timings = fn();
1599
+ element.attr('class', klass);
1600
+ return timings;
1601
+ });
1602
+
1603
+ if(cancellationMethod) {
1604
+ afterReflow(element, function() {
1605
+ unblockTransitions(element, className);
1606
+ unblockKeyframeAnimations(element);
1607
+ animationCompleted();
1608
+ });
1609
+ return cancellationMethod;
1610
+ }
1611
+ animationCompleted();
1612
+ },
1613
+
1614
+ removeClass : function(element, className, animationCompleted) {
1615
+ return animateAfter('removeClass', element, suffixClasses(className, '-remove'), animationCompleted);
1616
+ }
1617
+ };
1618
+
1619
+ function suffixClasses(classes, suffix) {
1620
+ var className = '';
1621
+ classes = angular.isArray(classes) ? classes : classes.split(/\s+/);
1622
+ forEach(classes, function(klass, i) {
1623
+ if(klass && klass.length > 0) {
1624
+ className += (i > 0 ? ' ' : '') + klass + suffix;
1625
+ }
1626
+ });
1627
+ return className;
1628
+ }
1629
+ }]);
1630
+ }]);
1631
+
1632
+
1633
+ })(window, window.angular);