@angular-wave/angular.ts 0.0.56 → 0.0.58

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/dist/angular-ts.esm.js +2 -2
  2. package/dist/angular-ts.umd.js +2 -2
  3. package/package.json +1 -1
  4. package/src/animations/animate-css.html +12 -2
  5. package/src/animations/animate-css.js +0 -1
  6. package/src/animations/raf-scheduler.js +37 -12
  7. package/src/core/animate/animate.js +97 -195
  8. package/src/directive/if/if-animate-css.html +65 -0
  9. package/src/directive/if/if.js +33 -10
  10. package/src/directive/if/if.md +2 -2
  11. package/src/directive/if/if.spec.js +0 -123
  12. package/src/directive/if/if.test.js +102 -0
  13. package/src/directive/include/include.js +26 -11
  14. package/src/directive/include/include.md +3 -2
  15. package/src/directive/model/model.js +41 -10
  16. package/src/shared/jqlite/jqlite.js +1 -1
  17. package/src/shared/utils.js +23 -0
  18. package/types/animations/raf-scheduler.d.ts +31 -2
  19. package/types/core/animate/animate.d.ts +93 -172
  20. package/types/directive/if/if.d.ts +10 -8
  21. package/types/shared/jqlite/jqlite.d.ts +2 -2
  22. package/types/shared/utils.d.ts +6 -0
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@angular-wave/angular.ts",
3
3
  "license": "MIT",
4
- "version": "0.0.56",
4
+ "version": "0.0.58",
5
5
  "type": "module",
6
6
  "main": "dist/angular-ts.esm.js",
7
7
  "browser": "dist/angular-ts.umd.js",
package/src/animations/animate-css.html CHANGED
@@ -19,9 +19,13 @@
19
19
  </script>
20
20
 
21
21
  <style>
22
+ .fade {
23
+ background-color: red;
24
+ }
22
25
  /* The starting CSS styles for the enter animation */
23
26
  .fade.ng-enter {
24
27
  transition: 0.5s linear all;
28
+ background-color: unset;
25
29
  opacity: 0;
26
30
  }
27
31
 
@@ -34,18 +38,24 @@
34
38
  /* The starting CSS styles for the leave animation */
35
39
  .fade.ng-leave {
36
40
  transition: 0.5s linear all;
37
- background-color: blue;
38
41
  opacity: 1;
39
42
  }
40
43
 
41
44
  /* The finishing CSS styles for the leave animation */
42
45
  .fade.ng-leave.ng-leave-active {
43
46
  opacity: 0;
47
+ background-color: unset;
44
48
  }
45
49
  </style>
46
50
  </head>
47
51
  <body ng-app="test">
48
- <div ng-if="bool" class="fade">Fade me in out</div>
52
+ <div ng-if="bool" id="data-animate" class="fade" data-animate="true">
53
+ Fade me in out
54
+ </div>
55
+ <div ng-if="bool" id="animate" class="fade" animate="true">
56
+ Fade me in out
57
+ </div>
58
+ <div ng-if="bool" id="no-animate" class="fade">Fade me in out</div>
49
59
  <button ng-click="bool=true">Fade In!</button>
50
60
  <button ng-click="bool=false">Fade Out!</button>
51
61
  </body>
package/src/animations/animate-css.js CHANGED
@@ -281,7 +281,6 @@ export function $AnimateCssProvider() {
281
281
  }
282
282
 
283
283
  const temporaryStyles = [];
284
- const classes = element.attr("class");
285
284
  const styles = packageStyles(options);
286
285
  let animationClosed;
287
286
  let animationPaused;
package/src/animations/raf-scheduler.js CHANGED
@@ -1,8 +1,28 @@
1
+ /**
2
+ * @typedef {Object} Scheduler
3
+ * @property {Function} waitUntilQuiet - Function to wait until the animation frame is quiet.
4
+ * @property {Array<Function>} queue - The queue of tasks to be processed.
5
+ * @property {Function} scheduler - The function to add tasks to the queue and schedule the next tick.
6
+ */
7
+
8
+ /**
9
+ * Creates a requestAnimationFrame scheduler.
10
+ * @returns {Scheduler} The scheduler object.
11
+ */
1
12
  export const $$rAFSchedulerFactory = [
2
13
  () => {
3
- let queue;
4
- let cancelFn;
14
+ /**
15
+ * @type {Array<Array<Function>>}
16
+ */
17
+ let queue = [];
18
+ /**
19
+ * @type {number|null}
20
+ */
21
+ let cancelFn = null;
5
22
 
23
+ /**
24
+ * Processes the next tick of the animation frame.
25
+ */
6
26
  function nextTick() {
7
27
  if (!queue.length) return;
8
28
 
@@ -11,13 +31,18 @@ export const $$rAFSchedulerFactory = [
11
31
 
12
32
  if (!cancelFn) {
13
33
  window.requestAnimationFrame(() => {
14
- if (!cancelFn) nextTick();
34
+ cancelFn = null;
35
+ nextTick();
15
36
  });
16
37
  }
17
38
  }
18
39
 
40
+ /**
41
+ * Adds tasks to the queue and schedules the next tick.
42
+ * @param {Array<Function>} tasks - The tasks to be added to the queue.
43
+ */
19
44
  function scheduler(tasks) {
20
- // we make a copy since RAFScheduler mutates the state
45
+ // Make a copy since RAFScheduler mutates the state
21
46
  // of the passed in array variable and this would be difficult
22
47
  // to track down on the outside code
23
48
  queue = queue.concat(tasks);
@@ -26,16 +51,16 @@ export const $$rAFSchedulerFactory = [
26
51
 
27
52
  queue = scheduler.queue = [];
28
53
 
29
- /* waitUntilQuiet does two things:
30
- * 1. It will run the FINAL `fn` value only when an uncanceled RAF has passed through
31
- * 2. It will delay the next wave of tasks from running until the quiet `fn` has run.
32
- *
33
- * The motivation here is that animation code can request more time from the scheduler
34
- * before the next wave runs. This allows for certain DOM properties such as classes to
35
- * be resolved in time for the next animation to run.
54
+ /**
55
+ * Waits until the animation frame is quiet before running the provided function.
56
+ * Cancels any previous animation frame requests.
57
+ * @param {Function} fn - The function to run when the animation frame is quiet.
36
58
  */
37
59
  scheduler.waitUntilQuiet = (fn) => {
38
- if (cancelFn) cancelFn();
60
+ if (cancelFn !== null) {
61
+ window.cancelAnimationFrame(cancelFn);
62
+ cancelFn = null;
63
+ }
39
64
 
40
65
  cancelFn = window.requestAnimationFrame(() => {
41
66
  cancelFn = null;
package/src/core/animate/animate.js CHANGED
@@ -10,6 +10,16 @@ import { JQLite } from "../../shared/jqlite/jqlite";
10
10
  import { NG_ANIMATE_CLASSNAME } from "../../animations/shared";
11
11
  import { addInlineStyles } from "./helpers";
12
12
 
13
+ /** @typedef {"enter"|"leave"|"move"|"addClass"|"setClass"|"removeClass"} AnimationMethod */
14
+
15
+ /**
16
+ * @typedef {Object} AnimationOptions
17
+ * @property {string} addClass - space-separated CSS classes to add to element
18
+ * @property {Object} from - CSS properties & values at the beginning of animation. Must have matching `to`
19
+ * @property {string} removeClass - space-separated CSS classes to remove from element
20
+ * @property {string} to - CSS properties & values at end of animation. Must have matching `from`
21
+ */
22
+
13
23
  const $animateMinErr = minErr("$animate");
14
24
 
15
25
  function mergeClasses(a, b) {
@@ -60,10 +70,6 @@ function prepareAnimateOptions(options) {
60
70
  return isObject(options) ? options : {};
61
71
  }
62
72
 
63
- export function CoreAnimateJsProvider() {
64
- this.$get = () => {};
65
- }
66
-
67
73
  // this is prefixed with Core since it conflicts with
68
74
  // the animateQueueProvider defined in ngAnimate/animateQueue.js
69
75
  export function CoreAnimateQueueProvider() {
@@ -179,6 +185,27 @@ export function CoreAnimateQueueProvider() {
179
185
  ];
180
186
  }
181
187
 
188
+ export function domInsert(element, parentElement, afterElement) {
189
+ // if for some reason the previous element was removed
190
+ // from the dom sometime before this code runs then let's
191
+ // just stick to using the parent element as the anchor
192
+ if (afterElement) {
193
+ const afterNode = extractElementNode(afterElement);
194
+ if (
195
+ afterNode &&
196
+ !afterNode.parentNode &&
197
+ !afterNode.previousElementSibling
198
+ ) {
199
+ afterElement = null;
200
+ }
201
+ }
202
+ if (afterElement) {
203
+ afterElement.after(element);
204
+ } else {
205
+ parentElement.prepend(element);
206
+ }
207
+ }
208
+
182
209
  AnimateProvider.$inject = ["$provide"];
183
210
  export function AnimateProvider($provide) {
184
211
  const provider = this;
@@ -327,31 +354,8 @@ export function AnimateProvider($provide) {
327
354
  this.$get = [
328
355
  "$$animateQueue",
329
356
  function ($$animateQueue) {
330
- function domInsert(element, parentElement, afterElement) {
331
- // if for some reason the previous element was removed
332
- // from the dom sometime before this code runs then let's
333
- // just stick to using the parent element as the anchor
334
- if (afterElement) {
335
- const afterNode = extractElementNode(afterElement);
336
- if (
337
- afterNode &&
338
- !afterNode.parentNode &&
339
- !afterNode.previousElementSibling
340
- ) {
341
- afterElement = null;
342
- }
343
- }
344
- if (afterElement) {
345
- afterElement.after(element);
346
- } else {
347
- parentElement.prepend(element);
348
- }
349
- }
350
-
351
357
  /**
352
- * @ngdoc service
353
- * @name $animate
354
- * @description The $animate service exposes a series of DOM utility methods that provide support
358
+ * The $animate service exposes a series of DOM utility methods that provide support
355
359
  * for animation hooks. The default behavior is the application of DOM operations, however,
356
360
  * when an animation is detected (and animations are enabled), $animate will do the heavy lifting
357
361
  * to ensure that animation runs with the triggered DOM operation.
@@ -363,20 +367,11 @@ export function AnimateProvider($provide) {
363
367
  * `ngShow`, `ngHide` and `ngMessages` also provide support for animations.
364
368
  *
365
369
  * It is recommended that the`$animate` service is always used when executing DOM-related procedures within directives.
366
- *
367
- * To learn more about enabling animation support, click here to visit the
368
- * {@link ngAnimate ngAnimate module page}.
369
370
  */
370
371
  return {
371
- // we don't call it directly since non-existant arguments may
372
- // be interpreted as null within the sub enabled function
373
-
374
372
  /**
375
373
  *
376
- * @ngdoc method
377
- * @name $animate#on
378
- * @kind function
379
- * @description Sets up an event listener to fire whenever the animation event (enter, leave, move, etc...)
374
+ * Sets up an event listener to fire whenever the animation event (enter, leave, move, etc...)
380
375
  * has fired on the given element or among any of its children. Once the listener is fired, the provided callback
381
376
  * is fired with the following params:
382
377
  *
@@ -425,11 +420,7 @@ export function AnimateProvider($provide) {
425
420
  on: $$animateQueue.on,
426
421
 
427
422
  /**
428
- *
429
- * @ngdoc method
430
- * @name $animate#off
431
- * @kind function
432
- * @description Deregisters an event listener based on the event which has been associated with the provided element. This method
423
+ * Deregisters an event listener based on the event which has been associated with the provided element. This method
433
424
  * can be used in three different ways depending on the arguments:
434
425
  *
435
426
  * ```js
@@ -456,17 +447,14 @@ export function AnimateProvider($provide) {
456
447
  off: $$animateQueue.off,
457
448
 
458
449
  /**
459
- * @ngdoc method
460
- * @name $animate#pin
461
- * @kind function
462
- * @description Associates the provided element with a host parent element to allow the element to be animated even if it exists
463
- * outside of the DOM structure of the AngularJS application. By doing so, any animation triggered via `$animate` can be issued on the
464
- * element despite being outside the realm of the application or within another application. Say for example if the application
465
- * was bootstrapped on an element that is somewhere inside of the `<body>` tag, but we wanted to allow for an element to be situated
466
- * as a direct child of `document.body`, then this can be achieved by pinning the element via `$animate.pin(element)`. Keep in mind
467
- * that calling `$animate.pin(element, parentElement)` will not actually insert into the DOM anywhere; it will just create the association.
450
+ * Associates the provided element with a host parent element to allow the element to be animated even if it exists
451
+ * outside of the DOM structure of the AngularJS application. By doing so, any animation triggered via `$animate` can be issued on the
452
+ * element despite being outside the realm of the application or within another application. Say for example if the application
453
+ * was bootstrapped on an element that is somewhere inside of the `<body>` tag, but we wanted to allow for an element to be situated
454
+ * as a direct child of `document.body`, then this can be achieved by pinning the element via `$animate.pin(element)`. Keep in mind
455
+ * that calling `$animate.pin(element, parentElement)` will not actually insert into the DOM anywhere; it will just create the association.
468
456
  *
469
- * Note that this feature is only active when the `ngAnimate` module is used.
457
+ * Note that this feature is only active when the `ngAnimate` module is used.
470
458
  *
471
459
  * @param {Element} element the external element that will be pinned
472
460
  * @param {Element} parentElement the host parent element that will be associated with the external element
@@ -505,14 +493,11 @@ export function AnimateProvider($provide) {
505
493
  enabled: $$animateQueue.enabled,
506
494
 
507
495
  /**
508
- * @ngdoc method
509
- * @name $animate#cancel
510
- * @kind function
511
- * @description Cancels the provided animation and applies the end state of the animation.
496
+ * Cancels the provided animation and applies the end state of the animation.
512
497
  * Note that this does not cancel the underlying operation, e.g. the setting of classes or
513
498
  * adding the element to the DOM.
514
499
  *
515
- * @param {animationRunner} animationRunner An animation runner returned by an $animate function.
500
+ * @param {import('./animate-runner').AnimateRunner} runner An animation runner returned by an $animate function.
516
501
  *
517
502
  * @example
518
503
  <example module="animationExample" deps="angular-animate.js" animations="true" name="animate-cancel">
@@ -583,28 +568,16 @@ export function AnimateProvider($provide) {
583
568
  },
584
569
 
585
570
  /**
586
- *
587
- * @ngdoc method
588
- * @name $animate#enter
589
- * @kind function
590
- * @description Inserts the element into the DOM either after the `after` element (if provided) or
591
- * as the first child within the `parent` element and then triggers an animation.
592
- * A promise is returned that will be resolved during the next digest once the animation
593
- * has completed.
594
- *
595
- * @param {Element} element the element which will be inserted into the DOM
596
- * @param {Element} parent the parent element which will append the element as
597
- * a child (so long as the after element is not present)
598
- * @param {Element=} after the sibling element after which the element will be appended
599
- * @param {object=} options an optional collection of options/styles that will be applied to the element.
600
- * The object can have the following properties:
601
- *
602
- * - **addClass** - `{string}` - space-separated CSS classes to add to element
603
- * - **from** - `{Object}` - CSS properties & values at the beginning of animation. Must have matching `to`
604
- * - **removeClass** - `{string}` - space-separated CSS classes to remove from element
605
- * - **to** - `{Object}` - CSS properties & values at end of animation. Must have matching `from`
606
- *
607
- * @return {Runner} the animation runner
571
+ * Inserts the element into the DOM either after the `after` element (if provided) or
572
+ * as the first child within the `parent` element and then triggers an animation.
573
+ * A promise is returned that will be resolved during the next digest once the animation
574
+ * has completed.
575
+ *
576
+ * @param {JQLite} element - the element which will be inserted into the DOM
577
+ * @param {JQLite} parent - the parent element which will append the element as a child (so long as the after element is not present)
578
+ * @param {JQLite} after - after the sibling element after which the element will be appended
579
+ * @param {AnimationOptions} [options] - an optional collection of options/styles that will be applied to the element.
580
+ * @returns {import('./animate-runner').AnimateRunner} the animation runner
608
581
  */
609
582
  enter(element, parent, after, options) {
610
583
  parent = parent && JQLite(parent);
@@ -619,28 +592,16 @@ export function AnimateProvider($provide) {
619
592
  },
620
593
 
621
594
  /**
622
- *
623
- * @ngdoc method
624
- * @name $animate#move
625
- * @kind function
626
- * @description Inserts (moves) the element into its new position in the DOM either after
627
- * the `after` element (if provided) or as the first child within the `parent` element
628
- * and then triggers an animation. A promise is returned that will be resolved
629
- * during the next digest once the animation has completed.
630
- *
631
- * @param {Element} element the element which will be moved into the new DOM position
632
- * @param {Element} parent the parent element which will append the element as
633
- * a child (so long as the after element is not present)
634
- * @param {Element=} after the sibling element after which the element will be appended
635
- * @param {object=} options an optional collection of options/styles that will be applied to the element.
636
- * The object can have the following properties:
637
- *
638
- * - **addClass** - `{string}` - space-separated CSS classes to add to element
639
- * - **from** - `{Object}` - CSS properties & values at the beginning of animation. Must have matching `to`
640
- * - **removeClass** - `{string}` - space-separated CSS classes to remove from element
641
- * - **to** - `{Object}` - CSS properties & values at end of animation. Must have matching `from`
642
- *
643
- * @return {Runner} the animation runner
595
+ * Inserts (moves) the element into its new position in the DOM either after
596
+ * the `after` element (if provided) or as the first child within the `parent` element
597
+ * and then triggers an animation. A promise is returned that will be resolved
598
+ * during the next digest once the animation has completed.
599
+ *
600
+ * @param {JQLite} element - the element which will be inserted into the DOM
601
+ * @param {JQLite} parent - the parent element which will append the element as a child (so long as the after element is not present)
602
+ * @param {JQLite} after - after the sibling element after which the element will be appended
603
+ * @param {AnimationOptions} [options] - an optional collection of options/styles that will be applied to the element.
604
+ * @returns {import('./animate-runner').AnimateRunner} the animation runner
644
605
  */
645
606
  move(element, parent, after, options) {
646
607
  parent = parent && JQLite(parent);
@@ -655,23 +616,13 @@ export function AnimateProvider($provide) {
655
616
  },
656
617
 
657
618
  /**
658
- * @ngdoc method
659
- * @name $animate#leave
660
- * @kind function
661
- * @description Triggers an animation and then removes the element from the DOM.
619
+ * Triggers an animation and then removes the element from the DOM.
662
620
  * When the function is called a promise is returned that will be resolved during the next
663
621
  * digest once the animation has completed.
664
622
  *
665
- * @param {Element} element the element which will be removed from the DOM
666
- * @param {object=} options an optional collection of options/styles that will be applied to the element.
667
- * The object can have the following properties:
668
- *
669
- * - **addClass** - `{string}` - space-separated CSS classes to add to element
670
- * - **from** - `{Object}` - CSS properties & values at the beginning of animation. Must have matching `to`
671
- * - **removeClass** - `{string}` - space-separated CSS classes to remove from element
672
- * - **to** - `{Object}` - CSS properties & values at end of animation. Must have matching `from`
673
- *
674
- * @return {Runner} the animation runner
623
+ * @param {JQLite} element the element which will be removed from the DOM
624
+ * @param {AnimationOptions} [options] an optional collection of options/styles that will be applied to the element.
625
+ * @returns {import('./animate-runner').AnimateRunner} the animation runner
675
626
  */
676
627
  leave(element, options) {
677
628
  return $$animateQueue.push(
@@ -685,56 +636,36 @@ export function AnimateProvider($provide) {
685
636
  },
686
637
 
687
638
  /**
688
- * @ngdoc method
689
- * @name $animate#addClass
690
- * @kind function
691
- *
692
- * @description Triggers an addClass animation surrounding the addition of the provided CSS class(es). Upon
693
- * execution, the addClass operation will only be handled after the next digest and it will not trigger an
694
- * animation if element already contains the CSS class or if the class is removed at a later step.
695
- * Note that class-based animations are treated differently compared to structural animations
696
- * (like enter, move and leave) since the CSS classes may be added/removed at different points
697
- * depending if CSS or JavaScript animations are used.
698
- *
699
- * @param {Element} element the element which the CSS classes will be applied to
639
+ * Triggers an addClass animation surrounding the addition of the provided CSS class(es). Upon
640
+ * execution, the addClass operation will only be handled after the next digest and it will not trigger an
641
+ * animation if element already contains the CSS class or if the class is removed at a later step.
642
+ * Note that class-based animations are treated differently compared to structural animations
643
+ * (like enter, move and leave) since the CSS classes may be added/removed at different points
644
+ * depending if CSS or JavaScript animations are used.
645
+ *
646
+ * @param {JQLite} element the element which the CSS classes will be applied to
700
647
  * @param {string} className the CSS class(es) that will be added (multiple classes are separated via spaces)
701
- * @param {object=} options an optional collection of options/styles that will be applied to the element.
702
- * The object can have the following properties:
703
- *
704
- * - **removeClass** - `{string}` - space-separated CSS classes to remove from element
705
- * - **from** - `{Object}` - CSS properties & values at the beginning of animation. Must have matching `to`
706
- * - **to** - `{Object}` - CSS properties & values at end of animation. Must have matching `from`
707
- *
708
- * @return {Runner} animationRunner the animation runner
648
+ * @param {AnimationOptions} [options] an optional collection of options/styles that will be applied to the element.
649
+ * @return {import('./animate-runner').AnimateRunner}} animationRunner the animation runner
709
650
  */
710
651
  addClass(element, className, options) {
711
652
  options = prepareAnimateOptions(options);
712
- options.addClass = mergeClasses(options.addclass, className);
653
+ options.addClass = mergeClasses(options.addClass, className);
713
654
  return $$animateQueue.push(element, "addClass", options);
714
655
  },
715
656
 
716
657
  /**
717
- * @ngdoc method
718
- * @name $animate#removeClass
719
- * @kind function
720
- *
721
- * @description Triggers a removeClass animation surrounding the removal of the provided CSS class(es). Upon
722
- * execution, the removeClass operation will only be handled after the next digest and it will not trigger an
723
- * animation if element does not contain the CSS class or if the class is added at a later step.
724
- * Note that class-based animations are treated differently compared to structural animations
725
- * (like enter, move and leave) since the CSS classes may be added/removed at different points
726
- * depending if CSS or JavaScript animations are used.
727
- *
728
- * @param {Element} element the element which the CSS classes will be applied to
658
+ * Triggers a removeClass animation surrounding the removal of the provided CSS class(es). Upon
659
+ * execution, the removeClass operation will only be handled after the next digest and it will not trigger an
660
+ * animation if element does not contain the CSS class or if the class is added at a later step.
661
+ * Note that class-based animations are treated differently compared to structural animations
662
+ * (like enter, move and leave) since the CSS classes may be added/removed at different points
663
+ * depending if CSS or JavaScript animations are used.
664
+ *
665
+ * @param {JQLite} element the element which the CSS classes will be applied to
729
666
  * @param {string} className the CSS class(es) that will be removed (multiple classes are separated via spaces)
730
- * @param {object=} options an optional collection of options/styles that will be applied to the element.
731
- * The object can have the following properties:
732
- *
733
- * - **addClass** - `{string}` - space-separated CSS classes to add to element
734
- * - **from** - `{Object}` - CSS properties & values at the beginning of animation. Must have matching `to`
735
- * - **to** - `{Object}` - CSS properties & values at end of animation. Must have matching `from`
736
- *
737
- * @return {Runner} the animation runner
667
+ * @param {AnimationOptions} [options] an optional collection of options/styles that will be applied to the element. *
668
+ * @return {import('./animate-runner').AnimateRunner} animationRunner the animation runner
738
669
  */
739
670
  removeClass(element, className, options) {
740
671
  options = prepareAnimateOptions(options);
@@ -743,29 +674,19 @@ export function AnimateProvider($provide) {
743
674
  },
744
675
 
745
676
  /**
746
- * @ngdoc method
747
- * @name $animate#setClass
748
- * @kind function
749
- *
750
- * @description Performs both the addition and removal of a CSS classes on an element and (during the process)
751
- * triggers an animation surrounding the class addition/removal. Much like `$animate.addClass` and
752
- * `$animate.removeClass`, `setClass` will only evaluate the classes being added/removed once a digest has
753
- * passed. Note that class-based animations are treated differently compared to structural animations
754
- * (like enter, move and leave) since the CSS classes may be added/removed at different points
755
- * depending if CSS or JavaScript animations are used.
677
+ * Performs both the addition and removal of a CSS classes on an element and (during the process)
678
+ * triggers an animation surrounding the class addition/removal. Much like `$animate.addClass` and
679
+ * `$animate.removeClass`, `setClass` will only evaluate the classes being added/removed once a digest has
680
+ * passed. Note that class-based animations are treated differently compared to structural animations
681
+ * (like enter, move and leave) since the CSS classes may be added/removed at different points
682
+ * depending if CSS or JavaScript animations are used.
756
683
  *
757
684
  * @param {Element} element the element which the CSS classes will be applied to
758
685
  * @param {string} add the CSS class(es) that will be added (multiple classes are separated via spaces)
759
686
  * @param {string} remove the CSS class(es) that will be removed (multiple classes are separated via spaces)
760
687
  * @param {object=} options an optional collection of options/styles that will be applied to the element.
761
- * The object can have the following properties:
762
688
  *
763
- * - **addClass** - `{string}` - space-separated CSS classes to add to element
764
- * - **removeClass** - `{string}` - space-separated CSS classes to remove from element
765
- * - **from** - `{Object}` - CSS properties & values at the beginning of animation. Must have matching `to`
766
- * - **to** - `{Object}` - CSS properties & values at end of animation. Must have matching `from`
767
- *
768
- * @return {Runner} the animation runner
689
+ * @return {import('./animate-runner').AnimateRunner} the animation runner
769
690
  */
770
691
  setClass(element, add, remove, options) {
771
692
  options = prepareAnimateOptions(options);
@@ -775,11 +696,7 @@ export function AnimateProvider($provide) {
775
696
  },
776
697
 
777
698
  /**
778
- * @ngdoc method
779
- * @name $animate#animate
780
- * @kind function
781
- *
782
- * @description Performs an inline animation on the element which applies the provided to and from CSS styles to the element.
699
+ * Performs an inline animation on the element which applies the provided to and from CSS styles to the element.
783
700
  * If any detected CSS transition, keyframe or JavaScript matches the provided className value, then the animation will take
784
701
  * on the provided styles. For example, if a transition animation is set for the given className, then the provided `from` and
785
702
  * `to` styles will be applied alongside the given transition. If the CSS style provided in `from` does not have a corresponding
@@ -797,22 +714,7 @@ export function AnimateProvider($provide) {
797
714
  * }
798
715
  * });
799
716
  * ```
800
- *
801
- * @param {Element} element the element which the CSS styles will be applied to
802
- * @param {object} from the from (starting) CSS styles that will be applied to the element and across the animation.
803
- * @param {object} to the to (destination) CSS styles that will be applied to the element and across the animation.
804
- * @param {string=} className an optional CSS class that will be applied to the element for the duration of the animation. If
805
- * this value is left as empty then a CSS class of `ng-inline-animate` will be applied to the element.
806
- * (Note that if no animation is detected then this value will not be applied to the element.)
807
- * @param {object=} options an optional collection of options/styles that will be applied to the element.
808
- * The object can have the following properties:
809
- *
810
- * - **addClass** - `{string}` - space-separated CSS classes to add to element
811
- * - **from** - `{Object}` - CSS properties & values at the beginning of animation. Must have matching `to`
812
- * - **removeClass** - `{string}` - space-separated CSS classes to remove from element
813
- * - **to** - `{Object}` - CSS properties & values at end of animation. Must have matching `from`
814
- *
815
- * @return {Runner} the animation runner
717
+ * @return {import('./animate-runner').AnimateRunner} the animation runner
816
718
  */
817
719
  animate(element, from, to, className, options) {
818
720
  options = prepareAnimateOptions(options);
package/src/directive/if/if-animate-css.html ADDED
@@ -0,0 +1,65 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>AngularTS Playwright test template</title>
6
+
7
+ <link rel="shortcut icon" type="image/png" href="/images/favicon.ico" />
8
+ <script type="module" src="/src/index.js"></script>
9
+ <script>
10
+ document.addEventListener("DOMContentLoaded", () => {
11
+ window.angular
12
+ .module("test", ["ngAnimate"])
13
+ .directive("svgContainer", () => ({
14
+ template: "<svg ng-transclude></svg>",
15
+ replace: true,
16
+ transclude: true,
17
+ }));
18
+ });
19
+ </script>
20
+
21
+ <style>
22
+ .fade {
23
+ background-color: red;
24
+ }
25
+ /* The starting CSS styles for the enter animation */
26
+ .fade.ng-enter {
27
+ transition: 0.5s linear all;
28
+ background-color: unset;
29
+ opacity: 0;
30
+ }
31
+
32
+ /* The finishing CSS styles for the enter animation */
33
+ .fade.ng-enter.ng-enter-active {
34
+ opacity: 1;
35
+ background-color: red;
36
+ }
37
+
38
+ /* The starting CSS styles for the leave animation */
39
+ .fade.ng-leave {
40
+ transition: 0.5s linear all;
41
+ opacity: 1;
42
+ }
43
+
44
+ /* The finishing CSS styles for the leave animation */
45
+ .fade.ng-leave.ng-leave-active {
46
+ opacity: 0;
47
+ background-color: unset;
48
+ }
49
+ </style>
50
+ </head>
51
+ <body ng-app="test">
52
+ <div ng-if="bool" id="data-animate" class="fade" data-animate="true">
53
+ Fade me in out
54
+ </div>
55
+ <div ng-if="bool" id="animate" class="fade" animate="true">
56
+ Fade me in out
57
+ </div>
58
+ <div ng-if="bool" id="no-animate" class="fade">Fade me in out</div>
59
+
60
+ <button ng-click="bool=true">Fade In!</button>
61
+ <button ng-click="bool=false">Fade Out!</button>
62
+
63
+ <svg-container><circle id="circle" ng-if="bool"></circle></svg-container>
64
+ </body>
65
+ </html>