UNPKG

53.8 kBTypeScriptView Raw
1/**
2 * @license Angular v18.2.5
3 * (c) 2010-2024 Google LLC. https://angular.io/
4 * License: MIT
5 */
6
7
8import * as i0 from '@angular/core';
9import { RendererFactory2 } from '@angular/core';
10
11/**
12 * Defines an animation step that combines styling information with timing information.
13 *
14 * @param timings Sets `AnimateTimings` for the parent animation.
15 * A string in the format "duration [delay] [easing]".
16 * - Duration and delay are expressed as a number and optional time unit,
17 * such as "1s" or "10ms" for one second and 10 milliseconds, respectively.
18 * The default unit is milliseconds.
19 * - The easing value controls how the animation accelerates and decelerates
20 * during its runtime. Value is one of `ease`, `ease-in`, `ease-out`,
21 * `ease-in-out`, or a `cubic-bezier()` function call.
22 * If not supplied, no easing is applied.
23 *
24 * For example, the string "1s 100ms ease-out" specifies a duration of
25 * 1000 milliseconds, and delay of 100 ms, and the "ease-out" easing style,
26 * which decelerates near the end of the duration.
27 * @param styles Sets AnimationStyles for the parent animation.
28 * A function call to either `style()` or `keyframes()`
29 * that returns a collection of CSS style entries to be applied to the parent animation.
30 * When null, uses the styles from the destination state.
31 * This is useful when describing an animation step that will complete an animation;
32 * see "Animating to the final state" in `transitions()`.
33 * @returns An object that encapsulates the animation step.
34 *
35 * @usageNotes
36 * Call within an animation `sequence()`, `{@link animations/group group()}`, or
37 * `transition()` call to specify an animation step
38 * that applies given style data to the parent animation for a given amount of time.
39 *
40 * ### Syntax Examples
41 * **Timing examples**
42 *
43 * The following examples show various `timings` specifications.
44 * - `animate(500)` : Duration is 500 milliseconds.
45 * - `animate("1s")` : Duration is 1000 milliseconds.
46 * - `animate("100ms 0.5s")` : Duration is 100 milliseconds, delay is 500 milliseconds.
47 * - `animate("5s ease-in")` : Duration is 5000 milliseconds, easing in.
48 * - `animate("5s 10ms cubic-bezier(.17,.67,.88,.1)")` : Duration is 5000 milliseconds, delay is 10
49 * milliseconds, easing according to a bezier curve.
50 *
51 * **Style examples**
52 *
53 * The following example calls `style()` to set a single CSS style.
54 * ```typescript
55 * animate(500, style({ background: "red" }))
56 * ```
57 * The following example calls `keyframes()` to set a CSS style
58 * to different values for successive keyframes.
59 * ```typescript
60 * animate(500, keyframes(
61 * [
62 * style({ background: "blue" }),
63 * style({ background: "red" })
64 * ])
65 * ```
66 *
67 * @publicApi
68 */
69export declare function animate(timings: string | number, styles?: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null): AnimationAnimateMetadata;
70
71/**
72 * Executes a queried inner animation element within an animation sequence.
73 *
74 * @param options An options object that can contain a delay value for the start of the
75 * animation, and additional override values for developer-defined parameters.
76 * @return An object that encapsulates the child animation data.
77 *
78 * @usageNotes
79 * Each time an animation is triggered in Angular, the parent animation
80 * has priority and any child animations are blocked. In order
81 * for a child animation to run, the parent animation must query each of the elements
82 * containing child animations, and run them using this function.
83 *
84 * Note that this feature is designed to be used with `query()` and it will only work
85 * with animations that are assigned using the Angular animation library. CSS keyframes
86 * and transitions are not handled by this API.
87 *
88 * @publicApi
89 */
90export declare function animateChild(options?: AnimateChildOptions | null): AnimationAnimateChildMetadata;
91
92/**
93 * Adds duration options to control animation styling and timing for a child animation.
94 *
95 * @see {@link animateChild}
96 *
97 * @publicApi
98 */
99export declare interface AnimateChildOptions extends AnimationOptions {
100 duration?: number | string;
101}
102
103/**
104 * Represents animation-step timing parameters for an animation step.
105 * @see {@link animate}
106 *
107 * @publicApi
108 */
109export declare type AnimateTimings = {
110 /**
111 * The full duration of an animation step. A number and optional time unit,
112 * such as "1s" or "10ms" for one second and 10 milliseconds, respectively.
113 * The default unit is milliseconds.
114 */
115 duration: number;
116 /**
117 * The delay in applying an animation step. A number and optional time unit.
118 * The default unit is milliseconds.
119 */
120 delay: number;
121 /**
122 * An easing style that controls how an animations step accelerates
123 * and decelerates during its run time. An easing function such as `cubic-bezier()`,
124 * or one of the following constants:
125 * - `ease-in`
126 * - `ease-out`
127 * - `ease-in-and-out`
128 */
129 easing: string | null;
130};
131
132/**
133 * Produces a reusable animation that can be invoked in another animation or sequence,
134 * by calling the `useAnimation()` function.
135 *
136 * @param steps One or more animation objects, as returned by the `animate()`
137 * or `sequence()` function, that form a transformation from one state to another.
138 * A sequence is used by default when you pass an array.
139 * @param options An options object that can contain a delay value for the start of the
140 * animation, and additional developer-defined parameters.
141 * Provided values for additional parameters are used as defaults,
142 * and override values can be passed to the caller on invocation.
143 * @returns An object that encapsulates the animation data.
144 *
145 * @usageNotes
146 * The following example defines a reusable animation, providing some default parameter
147 * values.
148 *
149 * ```typescript
150 * var fadeAnimation = animation([
151 * style({ opacity: '{{ start }}' }),
152 * animate('{{ time }}',
153 * style({ opacity: '{{ end }}'}))
154 * ],
155 * { params: { time: '1000ms', start: 0, end: 1 }});
156 * ```
157 *
158 * The following invokes the defined animation with a call to `useAnimation()`,
159 * passing in override parameter values.
160 *
161 * ```js
162 * useAnimation(fadeAnimation, {
163 * params: {
164 * time: '2s',
165 * start: 1,
166 * end: 0
167 * }
168 * })
169 * ```
170 *
171 * If any of the passed-in parameter values are missing from this call,
172 * the default values are used. If one or more parameter values are missing before a step is
173 * animated, `useAnimation()` throws an error.
174 *
175 * @publicApi
176 */
177export declare function animation(steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions | null): AnimationReferenceMetadata;
178
179/**
180 * Encapsulates a child animation, that can be run explicitly when the parent is run.
181 * Instantiated and returned by the `animateChild` function.
182 *
183 * @publicApi
184 */
185export declare interface AnimationAnimateChildMetadata extends AnimationMetadata {
186 /**
187 * An options object containing a delay and
188 * developer-defined parameters that provide styling defaults and
189 * can be overridden on invocation. Default delay is 0.
190 */
191 options: AnimationOptions | null;
192}
193
194/**
195 * Encapsulates an animation step. Instantiated and returned by
196 * the `animate()` function.
197 *
198 * @publicApi
199 */
200export declare interface AnimationAnimateMetadata extends AnimationMetadata {
201 /**
202 * The timing data for the step.
203 */
204 timings: string | number | AnimateTimings;
205 /**
206 * A set of styles used in the step.
207 */
208 styles: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null;
209}
210
211/**
212 * Encapsulates a reusable animation.
213 * Instantiated and returned by the `useAnimation()` function.
214 *
215 * @publicApi
216 */
217export declare interface AnimationAnimateRefMetadata extends AnimationMetadata {
218 /**
219 * An animation reference object.
220 */
221 animation: AnimationReferenceMetadata;
222 /**
223 * An options object containing a delay and
224 * developer-defined parameters that provide styling defaults and
225 * can be overridden on invocation. Default delay is 0.
226 */
227 options: AnimationOptions | null;
228}
229
230/**
231 * An injectable service that produces an animation sequence programmatically within an
232 * Angular component or directive.
233 * Provided by the `BrowserAnimationsModule` or `NoopAnimationsModule`.
234 *
235 * @usageNotes
236 *
237 * To use this service, add it to your component or directive as a dependency.
238 * The service is instantiated along with your component.
239 *
240 * Apps do not typically need to create their own animation players, but if you
241 * do need to, follow these steps:
242 *
243 * 1. Use the <code>[AnimationBuilder.build](api/animations/AnimationBuilder#build)()</code> method
244 * to create a programmatic animation. The method returns an `AnimationFactory` instance.
245 *
246 * 2. Use the factory object to create an `AnimationPlayer` and attach it to a DOM element.
247 *
248 * 3. Use the player object to control the animation programmatically.
249 *
250 * For example:
251 *
252 * ```ts
253 * // import the service from BrowserAnimationsModule
254 * import {AnimationBuilder} from '@angular/animations';
255 * // require the service as a dependency
256 * class MyCmp {
257 * constructor(private _builder: AnimationBuilder) {}
258 *
259 * makeAnimation(element: any) {
260 * // first define a reusable animation
261 * const myAnimation = this._builder.build([
262 * style({ width: 0 }),
263 * animate(1000, style({ width: '100px' }))
264 * ]);
265 *
266 * // use the returned factory object to create a player
267 * const player = myAnimation.create(element);
268 *
269 * player.play();
270 * }
271 * }
272 * ```
273 *
274 * @publicApi
275 */
276export declare abstract class AnimationBuilder {
277 /**
278 * Builds a factory for producing a defined animation.
279 * @param animation A reusable animation definition.
280 * @returns A factory object that can create a player for the defined animation.
281 * @see {@link animate}
282 */
283 abstract build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory;
284 static ɵfac: i0.ɵɵFactoryDeclaration<AnimationBuilder, never>;
285 static ɵprov: i0.ɵɵInjectableDeclaration<AnimationBuilder>;
286}
287
288
289/**
290 * An instance of this class is returned as an event parameter when an animation
291 * callback is captured for an animation either during the start or done phase.
292 *
293 * ```typescript
294 * @Component({
295 * host: {
296 * '[@myAnimationTrigger]': 'someExpression',
297 * '(@myAnimationTrigger.start)': 'captureStartEvent($event)',
298 * '(@myAnimationTrigger.done)': 'captureDoneEvent($event)',
299 * },
300 * animations: [
301 * trigger("myAnimationTrigger", [
302 * // ...
303 * ])
304 * ]
305 * })
306 * class MyComponent {
307 * someExpression: any = false;
308 * captureStartEvent(event: AnimationEvent) {
309 * // the toState, fromState and totalTime data is accessible from the event variable
310 * }
311 *
312 * captureDoneEvent(event: AnimationEvent) {
313 * // the toState, fromState and totalTime data is accessible from the event variable
314 * }
315 * }
316 * ```
317 *
318 * @publicApi
319 */
320declare interface AnimationEvent_2 {
321 /**
322 * The name of the state from which the animation is triggered.
323 */
324 fromState: string;
325 /**
326 * The name of the state in which the animation completes.
327 */
328 toState: string;
329 /**
330 * The time it takes the animation to complete, in milliseconds.
331 */
332 totalTime: number;
333 /**
334 * The animation phase in which the callback was invoked, one of
335 * "start" or "done".
336 */
337 phaseName: string;
338 /**
339 * The element to which the animation is attached.
340 */
341 element: any;
342 /**
343 * Internal.
344 */
345 triggerName: string;
346 /**
347 * Internal.
348 */
349 disabled: boolean;
350}
351export { AnimationEvent_2 as AnimationEvent }
352
353/**
354 * A factory object returned from the
355 * <code>[AnimationBuilder.build](api/animations/AnimationBuilder#build)()</code>
356 * method.
357 *
358 * @publicApi
359 */
360export declare abstract class AnimationFactory {
361 /**
362 * Creates an `AnimationPlayer` instance for the reusable animation defined by
363 * the <code>[AnimationBuilder.build](api/animations/AnimationBuilder#build)()</code>
364 * method that created this factory and attaches the new player a DOM element.
365 *
366 * @param element The DOM element to which to attach the player.
367 * @param options A set of options that can include a time delay and
368 * additional developer-defined parameters.
369 */
370 abstract create(element: any, options?: AnimationOptions): AnimationPlayer;
371}
372
373/**
374 * Encapsulates an animation group.
375 * Instantiated and returned by the `{@link animations/group group()}` function.
376 *
377 * @publicApi
378 */
379export declare interface AnimationGroupMetadata extends AnimationMetadata {
380 /**
381 * One or more animation or style steps that form this group.
382 */
383 steps: AnimationMetadata[];
384 /**
385 * An options object containing a delay and
386 * developer-defined parameters that provide styling defaults and
387 * can be overridden on invocation. Default delay is 0.
388 */
389 options: AnimationOptions | null;
390}
391
392/**
393 * Encapsulates a keyframes sequence. Instantiated and returned by
394 * the `keyframes()` function.
395 *
396 * @publicApi
397 */
398export declare interface AnimationKeyframesSequenceMetadata extends AnimationMetadata {
399 /**
400 * An array of animation styles.
401 */
402 steps: AnimationStyleMetadata[];
403}
404
405/**
406 * Base for animation data structures.
407 *
408 * @publicApi
409 */
410export declare interface AnimationMetadata {
411 type: AnimationMetadataType;
412}
413
414/**
415 * @description Constants for the categories of parameters that can be defined for animations.
416 *
417 * A corresponding function defines a set of parameters for each category, and
418 * collects them into a corresponding `AnimationMetadata` object.
419 *
420 * @publicApi
421 */
422export declare enum AnimationMetadataType {
423 /**
424 * Associates a named animation state with a set of CSS styles.
425 * See [`state()`](api/animations/state)
426 */
427 State = 0,
428 /**
429 * Data for a transition from one animation state to another.
430 * See `transition()`
431 */
432 Transition = 1,
433 /**
434 * Contains a set of animation steps.
435 * See `sequence()`
436 */
437 Sequence = 2,
438 /**
439 * Contains a set of animation steps.
440 * See `{@link animations/group group()}`
441 */
442 Group = 3,
443 /**
444 * Contains an animation step.
445 * See `animate()`
446 */
447 Animate = 4,
448 /**
449 * Contains a set of animation steps.
450 * See `keyframes()`
451 */
452 Keyframes = 5,
453 /**
454 * Contains a set of CSS property-value pairs into a named style.
455 * See `style()`
456 */
457 Style = 6,
458 /**
459 * Associates an animation with an entry trigger that can be attached to an element.
460 * See `trigger()`
461 */
462 Trigger = 7,
463 /**
464 * Contains a re-usable animation.
465 * See `animation()`
466 */
467 Reference = 8,
468 /**
469 * Contains data to use in executing child animations returned by a query.
470 * See `animateChild()`
471 */
472 AnimateChild = 9,
473 /**
474 * Contains animation parameters for a re-usable animation.
475 * See `useAnimation()`
476 */
477 AnimateRef = 10,
478 /**
479 * Contains child-animation query data.
480 * See `query()`
481 */
482 Query = 11,
483 /**
484 * Contains data for staggering an animation sequence.
485 * See `stagger()`
486 */
487 Stagger = 12
488}
489
490/**
491 * @description Options that control animation styling and timing.
492 *
493 * The following animation functions accept `AnimationOptions` data:
494 *
495 * - `transition()`
496 * - `sequence()`
497 * - `{@link animations/group group()}`
498 * - `query()`
499 * - `animation()`
500 * - `useAnimation()`
501 * - `animateChild()`
502 *
503 * Programmatic animations built using the `AnimationBuilder` service also
504 * make use of `AnimationOptions`.
505 *
506 * @publicApi
507 */
508export declare interface AnimationOptions {
509 /**
510 * Sets a time-delay for initiating an animation action.
511 * A number and optional time unit, such as "1s" or "10ms" for one second
512 * and 10 milliseconds, respectively.The default unit is milliseconds.
513 * Default value is 0, meaning no delay.
514 */
515 delay?: number | string;
516 /**
517 * A set of developer-defined parameters that modify styling and timing
518 * when an animation action starts. An array of key-value pairs, where the provided value
519 * is used as a default.
520 */
521 params?: {
522 [name: string]: any;
523 };
524}
525
526
527/**
528 * Provides programmatic control of a reusable animation sequence,
529 * built using the <code>[AnimationBuilder.build](api/animations/AnimationBuilder#build)()</code>
530 * method which returns an `AnimationFactory`, whose
531 * <code>[create](api/animations/AnimationFactory#create)()</code> method instantiates and
532 * initializes this interface.
533 *
534 * @see {@link AnimationBuilder}
535 * @see {@link AnimationFactory}
536 * @see {@link animate}
537 *
538 * @publicApi
539 */
540export declare interface AnimationPlayer {
541 /**
542 * Provides a callback to invoke when the animation finishes.
543 * @param fn The callback function.
544 * @see {@link #finish}
545 */
546 onDone(fn: () => void): void;
547 /**
548 * Provides a callback to invoke when the animation starts.
549 * @param fn The callback function.
550 * @see {@link #play}
551 */
552 onStart(fn: () => void): void;
553 /**
554 * Provides a callback to invoke after the animation is destroyed.
555 * @param fn The callback function.
556 * @see {@link #destroy}
557 * @see {@link #beforeDestroy}
558 */
559 onDestroy(fn: () => void): void;
560 /**
561 * Initializes the animation.
562 */
563 init(): void;
564 /**
565 * Reports whether the animation has started.
566 * @returns True if the animation has started, false otherwise.
567 */
568 hasStarted(): boolean;
569 /**
570 * Runs the animation, invoking the `onStart()` callback.
571 */
572 play(): void;
573 /**
574 * Pauses the animation.
575 */
576 pause(): void;
577 /**
578 * Restarts the paused animation.
579 */
580 restart(): void;
581 /**
582 * Ends the animation, invoking the `onDone()` callback.
583 */
584 finish(): void;
585 /**
586 * Destroys the animation, after invoking the `beforeDestroy()` callback.
587 * Calls the `onDestroy()` callback when destruction is completed.
588 */
589 destroy(): void;
590 /**
591 * Resets the animation to its initial state.
592 */
593 reset(): void;
594 /**
595 * Sets the position of the animation.
596 * @param position A 0-based offset into the duration, in milliseconds.
597 */
598 setPosition(position: number): void;
599 /**
600 * Reports the current position of the animation.
601 * @returns A 0-based offset into the duration, in milliseconds.
602 */
603 getPosition(): number;
604 /**
605 * The parent of this player, if any.
606 */
607 parentPlayer: AnimationPlayer | null;
608 /**
609 * The total run time of the animation, in milliseconds.
610 */
611 readonly totalTime: number;
612 /**
613 * Provides a callback to invoke before the animation is destroyed.
614 */
615 beforeDestroy?: () => any;
616}
617
618/**
619 * Encapsulates an animation query. Instantiated and returned by
620 * the `query()` function.
621 *
622 * @publicApi
623 */
624export declare interface AnimationQueryMetadata extends AnimationMetadata {
625 /**
626 * The CSS selector for this query.
627 */
628 selector: string;
629 /**
630 * One or more animation step objects.
631 */
632 animation: AnimationMetadata | AnimationMetadata[];
633 /**
634 * A query options object.
635 */
636 options: AnimationQueryOptions | null;
637}
638
639/**
640 * Encapsulates animation query options.
641 * Passed to the `query()` function.
642 *
643 * @publicApi
644 */
645export declare interface AnimationQueryOptions extends AnimationOptions {
646 /**
647 * True if this query is optional, false if it is required. Default is false.
648 * A required query throws an error if no elements are retrieved when
649 * the query is executed. An optional query does not.
650 *
651 */
652 optional?: boolean;
653 /**
654 * A maximum total number of results to return from the query.
655 * If negative, results are limited from the end of the query list towards the beginning.
656 * By default, results are not limited.
657 */
658 limit?: number;
659}
660
661/**
662 * Encapsulates a reusable animation, which is a collection of individual animation steps.
663 * Instantiated and returned by the `animation()` function, and
664 * passed to the `useAnimation()` function.
665 *
666 * @publicApi
667 */
668export declare interface AnimationReferenceMetadata extends AnimationMetadata {
669 /**
670 * One or more animation step objects.
671 */
672 animation: AnimationMetadata | AnimationMetadata[];
673 /**
674 * An options object containing a delay and
675 * developer-defined parameters that provide styling defaults and
676 * can be overridden on invocation. Default delay is 0.
677 */
678 options: AnimationOptions | null;
679}
680
681/**
682 * Encapsulates an animation sequence.
683 * Instantiated and returned by the `sequence()` function.
684 *
685 * @publicApi
686 */
687export declare interface AnimationSequenceMetadata extends AnimationMetadata {
688 /**
689 * An array of animation step objects.
690 */
691 steps: AnimationMetadata[];
692 /**
693 * An options object containing a delay and
694 * developer-defined parameters that provide styling defaults and
695 * can be overridden on invocation. Default delay is 0.
696 */
697 options: AnimationOptions | null;
698}
699
700/**
701 * Encapsulates parameters for staggering the start times of a set of animation steps.
702 * Instantiated and returned by the `stagger()` function.
703 *
704 * @publicApi
705 **/
706export declare interface AnimationStaggerMetadata extends AnimationMetadata {
707 /**
708 * The timing data for the steps.
709 */
710 timings: string | number;
711 /**
712 * One or more animation steps.
713 */
714 animation: AnimationMetadata | AnimationMetadata[];
715}
716
717/**
718 * Encapsulates an animation state by associating a state name with a set of CSS styles.
719 * Instantiated and returned by the [`state()`](api/animations/state) function.
720 *
721 * @publicApi
722 */
723export declare interface AnimationStateMetadata extends AnimationMetadata {
724 /**
725 * The state name, unique within the component.
726 */
727 name: string;
728 /**
729 * The CSS styles associated with this state.
730 */
731 styles: AnimationStyleMetadata;
732 /**
733 * An options object containing
734 * developer-defined parameters that provide styling defaults and
735 * can be overridden on invocation.
736 */
737 options?: {
738 params: {
739 [name: string]: any;
740 };
741 };
742}
743
744/**
745 * Encapsulates an animation style. Instantiated and returned by
746 * the `style()` function.
747 *
748 * @publicApi
749 */
750export declare interface AnimationStyleMetadata extends AnimationMetadata {
751 /**
752 * A set of CSS style properties.
753 */
754 styles: '*' | {
755 [key: string]: string | number;
756 } | Array<{
757 [key: string]: string | number;
758 } | '*'>;
759 /**
760 * A percentage of the total animate time at which the style is to be applied.
761 */
762 offset: number | null;
763}
764
765/**
766 * Encapsulates an animation transition. Instantiated and returned by the
767 * `transition()` function.
768 *
769 * @publicApi
770 */
771export declare interface AnimationTransitionMetadata extends AnimationMetadata {
772 /**
773 * An expression that describes a state change.
774 */
775 expr: string | ((fromState: string, toState: string, element?: any, params?: {
776 [key: string]: any;
777 }) => boolean);
778 /**
779 * One or more animation objects to which this transition applies.
780 */
781 animation: AnimationMetadata | AnimationMetadata[];
782 /**
783 * An options object containing a delay and
784 * developer-defined parameters that provide styling defaults and
785 * can be overridden on invocation. Default delay is 0.
786 */
787 options: AnimationOptions | null;
788}
789
790/**
791 * Contains an animation trigger. Instantiated and returned by the
792 * `trigger()` function.
793 *
794 * @publicApi
795 */
796export declare interface AnimationTriggerMetadata extends AnimationMetadata {
797 /**
798 * The trigger name, used to associate it with an element. Unique within the component.
799 */
800 name: string;
801 /**
802 * An animation definition object, containing an array of state and transition declarations.
803 */
804 definitions: AnimationMetadata[];
805 /**
806 * An options object containing a delay and
807 * developer-defined parameters that provide styling defaults and
808 * can be overridden on invocation. Default delay is 0.
809 */
810 options: {
811 params?: {
812 [name: string]: any;
813 };
814 } | null;
815}
816
817/**
818 * Specifies automatic styling.
819 *
820 * @publicApi
821 */
822export declare const AUTO_STYLE = "*";
823
824/**
825 * @description Defines a list of animation steps to be run in parallel.
826 *
827 * @param steps An array of animation step objects.
828 * - When steps are defined by `style()` or `animate()`
829 * function calls, each call within the group is executed instantly.
830 * - To specify offset styles to be applied at a later time, define steps with
831 * `keyframes()`, or use `animate()` calls with a delay value.
832 * For example:
833 *
834 * ```typescript
835 * group([
836 * animate("1s", style({ background: "black" })),
837 * animate("2s", style({ color: "white" }))
838 * ])
839 * ```
840 *
841 * @param options An options object containing a delay and
842 * developer-defined parameters that provide styling defaults and
843 * can be overridden on invocation.
844 *
845 * @return An object that encapsulates the group data.
846 *
847 * @usageNotes
848 * Grouped animations are useful when a series of styles must be
849 * animated at different starting times and closed off at different ending times.
850 *
851 * When called within a `sequence()` or a
852 * `transition()` call, does not continue to the next
853 * instruction until all of the inner animation steps have completed.
854 *
855 * @publicApi
856 */
857export declare function group(steps: AnimationMetadata[], options?: AnimationOptions | null): AnimationGroupMetadata;
858
859/**
860 * Defines a set of animation styles, associating each style with an optional `offset` value.
861 *
862 * @param steps A set of animation styles with optional offset data.
863 * The optional `offset` value for a style specifies a percentage of the total animation
864 * time at which that style is applied.
865 * @returns An object that encapsulates the keyframes data.
866 *
867 * @usageNotes
868 * Use with the `animate()` call. Instead of applying animations
869 * from the current state
870 * to the destination state, keyframes describe how each style entry is applied and at what point
871 * within the animation arc.
872 * Compare [CSS Keyframe Animations](https://www.w3schools.com/css/css3_animations.asp).
873 *
874 * ### Usage
875 *
876 * In the following example, the offset values describe
877 * when each `backgroundColor` value is applied. The color is red at the start, and changes to
878 * blue when 20% of the total time has elapsed.
879 *
880 * ```typescript
881 * // the provided offset values
882 * animate("5s", keyframes([
883 * style({ backgroundColor: "red", offset: 0 }),
884 * style({ backgroundColor: "blue", offset: 0.2 }),
885 * style({ backgroundColor: "orange", offset: 0.3 }),
886 * style({ backgroundColor: "black", offset: 1 })
887 * ]))
888 * ```
889 *
890 * If there are no `offset` values specified in the style entries, the offsets
891 * are calculated automatically.
892 *
893 * ```typescript
894 * animate("5s", keyframes([
895 * style({ backgroundColor: "red" }) // offset = 0
896 * style({ backgroundColor: "blue" }) // offset = 0.33
897 * style({ backgroundColor: "orange" }) // offset = 0.66
898 * style({ backgroundColor: "black" }) // offset = 1
899 * ]))
900 *```
901
902 * @publicApi
903 */
904export declare function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSequenceMetadata;
905
906/**
907 * An empty programmatic controller for reusable animations.
908 * Used internally when animations are disabled, to avoid
909 * checking for the null case when an animation player is expected.
910 *
911 * @see {@link animate}
912 * @see {@link AnimationPlayer}
913 *
914 * @publicApi
915 */
916export declare class NoopAnimationPlayer implements AnimationPlayer {
917 private _onDoneFns;
918 private _onStartFns;
919 private _onDestroyFns;
920 private _originalOnDoneFns;
921 private _originalOnStartFns;
922 private _started;
923 private _destroyed;
924 private _finished;
925 private _position;
926 parentPlayer: AnimationPlayer | null;
927 readonly totalTime: number;
928 constructor(duration?: number, delay?: number);
929 private _onFinish;
930 onStart(fn: () => void): void;
931 onDone(fn: () => void): void;
932 onDestroy(fn: () => void): void;
933 hasStarted(): boolean;
934 init(): void;
935 play(): void;
936 private _onStart;
937 pause(): void;
938 restart(): void;
939 finish(): void;
940 destroy(): void;
941 reset(): void;
942 setPosition(position: number): void;
943 getPosition(): number;
944}
945
946/**
947 * Finds one or more inner elements within the current element that is
948 * being animated within a sequence. Use with `animate()`.
949 *
950 * @param selector The element to query, or a set of elements that contain Angular-specific
951 * characteristics, specified with one or more of the following tokens.
952 * - `query(":enter")` or `query(":leave")` : Query for newly inserted/removed elements (not
953 * all elements can be queried via these tokens, see
954 * [Entering and Leaving Elements](#entering-and-leaving-elements))
955 * - `query(":animating")` : Query all currently animating elements.
956 * - `query("@triggerName")` : Query elements that contain an animation trigger.
957 * - `query("@*")` : Query all elements that contain an animation triggers.
958 * - `query(":self")` : Include the current element into the animation sequence.
959 *
960 * @param animation One or more animation steps to apply to the queried element or elements.
961 * An array is treated as an animation sequence.
962 * @param options An options object. Use the 'limit' field to limit the total number of
963 * items to collect.
964 * @return An object that encapsulates the query data.
965 *
966 * @usageNotes
967 *
968 * ### Multiple Tokens
969 *
970 * Tokens can be merged into a combined query selector string. For example:
971 *
972 * ```typescript
973 * query(':self, .record:enter, .record:leave, @subTrigger', [...])
974 * ```
975 *
976 * The `query()` function collects multiple elements and works internally by using
977 * `element.querySelectorAll`. Use the `limit` field of an options object to limit
978 * the total number of items to be collected. For example:
979 *
980 * ```js
981 * query('div', [
982 * animate(...),
983 * animate(...)
984 * ], { limit: 1 })
985 * ```
986 *
987 * By default, throws an error when zero items are found. Set the
988 * `optional` flag to ignore this error. For example:
989 *
990 * ```js
991 * query('.some-element-that-may-not-be-there', [
992 * animate(...),
993 * animate(...)
994 * ], { optional: true })
995 * ```
996 *
997 * ### Entering and Leaving Elements
998 *
999 * Not all elements can be queried via the `:enter` and `:leave` tokens, the only ones
1000 * that can are those that Angular assumes can enter/leave based on their own logic
1001 * (if their insertion/removal is simply a consequence of that of their parent they
1002 * should be queried via a different token in their parent's `:enter`/`:leave` transitions).
1003 *
1004 * The only elements Angular assumes can enter/leave based on their own logic (thus the only
1005 * ones that can be queried via the `:enter` and `:leave` tokens) are:
1006 * - Those inserted dynamically (via `ViewContainerRef`)
1007 * - Those that have a structural directive (which, under the hood, are a subset of the above ones)
1008 *
1009 * <div class="alert is-helpful">
1010 *
1011 * Note that elements will be successfully queried via `:enter`/`:leave` even if their
1012 * insertion/removal is not done manually via `ViewContainerRef`or caused by their structural
1013 * directive (e.g. they enter/exit alongside their parent).
1014 *
1015 * </div>
1016 *
1017 * <div class="alert is-important">
1018 *
1019 * There is an exception to what previously mentioned, besides elements entering/leaving based on
1020 * their own logic, elements with an animation trigger can always be queried via `:leave` when
1021 * their parent is also leaving.
1022 *
1023 * </div>
1024 *
1025 * ### Usage Example
1026 *
1027 * The following example queries for inner elements and animates them
1028 * individually using `animate()`.
1029 *
1030 * ```typescript
1031 * @Component({
1032 * selector: 'inner',
1033 * template: `
1034 * <div [@queryAnimation]="exp">
1035 * <h1>Title</h1>
1036 * <div class="content">
1037 * Blah blah blah
1038 * </div>
1039 * </div>
1040 * `,
1041 * animations: [
1042 * trigger('queryAnimation', [
1043 * transition('* => goAnimate', [
1044 * // hide the inner elements
1045 * query('h1', style({ opacity: 0 })),
1046 * query('.content', style({ opacity: 0 })),
1047 *
1048 * // animate the inner elements in, one by one
1049 * query('h1', animate(1000, style({ opacity: 1 }))),
1050 * query('.content', animate(1000, style({ opacity: 1 }))),
1051 * ])
1052 * ])
1053 * ]
1054 * })
1055 * class Cmp {
1056 * exp = '';
1057 *
1058 * goAnimate() {
1059 * this.exp = 'goAnimate';
1060 * }
1061 * }
1062 * ```
1063 *
1064 * @publicApi
1065 */
1066export declare function query(selector: string, animation: AnimationMetadata | AnimationMetadata[], options?: AnimationQueryOptions | null): AnimationQueryMetadata;
1067
1068/**
1069 * Defines a list of animation steps to be run sequentially, one by one.
1070 *
1071 * @param steps An array of animation step objects.
1072 * - Steps defined by `style()` calls apply the styling data immediately.
1073 * - Steps defined by `animate()` calls apply the styling data over time
1074 * as specified by the timing data.
1075 *
1076 * ```typescript
1077 * sequence([
1078 * style({ opacity: 0 }),
1079 * animate("1s", style({ opacity: 1 }))
1080 * ])
1081 * ```
1082 *
1083 * @param options An options object containing a delay and
1084 * developer-defined parameters that provide styling defaults and
1085 * can be overridden on invocation.
1086 *
1087 * @return An object that encapsulates the sequence data.
1088 *
1089 * @usageNotes
1090 * When you pass an array of steps to a
1091 * `transition()` call, the steps run sequentially by default.
1092 * Compare this to the `{@link animations/group group()}` call, which runs animation steps in
1093 *parallel.
1094 *
1095 * When a sequence is used within a `{@link animations/group group()}` or a `transition()` call,
1096 * execution continues to the next instruction only after each of the inner animation
1097 * steps have completed.
1098 *
1099 * @publicApi
1100 **/
1101export declare function sequence(steps: AnimationMetadata[], options?: AnimationOptions | null): AnimationSequenceMetadata;
1102
1103/**
1104 * Use within an animation `query()` call to issue a timing gap after
1105 * each queried item is animated.
1106 *
1107 * @param timings A delay value.
1108 * @param animation One ore more animation steps.
1109 * @returns An object that encapsulates the stagger data.
1110 *
1111 * @usageNotes
1112 * In the following example, a container element wraps a list of items stamped out
1113 * by an `ngFor`. The container element contains an animation trigger that will later be set
1114 * to query for each of the inner items.
1115 *
1116 * Each time items are added, the opacity fade-in animation runs,
1117 * and each removed item is faded out.
1118 * When either of these animations occur, the stagger effect is
1119 * applied after each item's animation is started.
1120 *
1121 * ```html
1122 * <!-- list.component.html -->
1123 * <button (click)="toggle()">Show / Hide Items</button>
1124 * <hr />
1125 * <div [@listAnimation]="items.length">
1126 * <div *ngFor="let item of items">
1127 * {{ item }}
1128 * </div>
1129 * </div>
1130 * ```
1131 *
1132 * Here is the component code:
1133 *
1134 * ```typescript
1135 * import {trigger, transition, style, animate, query, stagger} from '@angular/animations';
1136 * @Component({
1137 * templateUrl: 'list.component.html',
1138 * animations: [
1139 * trigger('listAnimation', [
1140 * ...
1141 * ])
1142 * ]
1143 * })
1144 * class ListComponent {
1145 * items = [];
1146 *
1147 * showItems() {
1148 * this.items = [0,1,2,3,4];
1149 * }
1150 *
1151 * hideItems() {
1152 * this.items = [];
1153 * }
1154 *
1155 * toggle() {
1156 * this.items.length ? this.hideItems() : this.showItems();
1157 * }
1158 * }
1159 * ```
1160 *
1161 * Here is the animation trigger code:
1162 *
1163 * ```typescript
1164 * trigger('listAnimation', [
1165 * transition('* => *', [ // each time the binding value changes
1166 * query(':leave', [
1167 * stagger(100, [
1168 * animate('0.5s', style({ opacity: 0 }))
1169 * ])
1170 * ]),
1171 * query(':enter', [
1172 * style({ opacity: 0 }),
1173 * stagger(100, [
1174 * animate('0.5s', style({ opacity: 1 }))
1175 * ])
1176 * ])
1177 * ])
1178 * ])
1179 * ```
1180 *
1181 * @publicApi
1182 */
1183export declare function stagger(timings: string | number, animation: AnimationMetadata | AnimationMetadata[]): AnimationStaggerMetadata;
1184
1185/**
1186 * Declares an animation state within a trigger attached to an element.
1187 *
1188 * @param name One or more names for the defined state in a comma-separated string.
1189 * The following reserved state names can be supplied to define a style for specific use
1190 * cases:
1191 *
1192 * - `void` You can associate styles with this name to be used when
1193 * the element is detached from the application. For example, when an `ngIf` evaluates
1194 * to false, the state of the associated element is void.
1195 * - `*` (asterisk) Indicates the default state. You can associate styles with this name
1196 * to be used as the fallback when the state that is being animated is not declared
1197 * within the trigger.
1198 *
1199 * @param styles A set of CSS styles associated with this state, created using the
1200 * `style()` function.
1201 * This set of styles persists on the element once the state has been reached.
1202 * @param options Parameters that can be passed to the state when it is invoked.
1203 * 0 or more key-value pairs.
1204 * @return An object that encapsulates the new state data.
1205 *
1206 * @usageNotes
1207 * Use the `trigger()` function to register states to an animation trigger.
1208 * Use the `transition()` function to animate between states.
1209 * When a state is active within a component, its associated styles persist on the element,
1210 * even when the animation ends.
1211 *
1212 * @publicApi
1213 **/
1214export declare function state(name: string, styles: AnimationStyleMetadata, options?: {
1215 params: {
1216 [name: string]: any;
1217 };
1218}): AnimationStateMetadata;
1219
1220/**
1221 * Declares a key/value object containing CSS properties/styles that
1222 * can then be used for an animation [`state`](api/animations/state), within an animation
1223 *`sequence`, or as styling data for calls to `animate()` and `keyframes()`.
1224 *
1225 * @param tokens A set of CSS styles or HTML styles associated with an animation state.
1226 * The value can be any of the following:
1227 * - A key-value style pair associating a CSS property with a value.
1228 * - An array of key-value style pairs.
1229 * - An asterisk (*), to use auto-styling, where styles are derived from the element
1230 * being animated and applied to the animation when it starts.
1231 *
1232 * Auto-styling can be used to define a state that depends on layout or other
1233 * environmental factors.
1234 *
1235 * @return An object that encapsulates the style data.
1236 *
1237 * @usageNotes
1238 * The following examples create animation styles that collect a set of
1239 * CSS property values:
1240 *
1241 * ```typescript
1242 * // string values for CSS properties
1243 * style({ background: "red", color: "blue" })
1244 *
1245 * // numerical pixel values
1246 * style({ width: 100, height: 0 })
1247 * ```
1248 *
1249 * The following example uses auto-styling to allow an element to animate from
1250 * a height of 0 up to its full height:
1251 *
1252 * ```
1253 * style({ height: 0 }),
1254 * animate("1s", style({ height: "*" }))
1255 * ```
1256 *
1257 * @publicApi
1258 **/
1259export declare function style(tokens: '*' | {
1260 [key: string]: string | number;
1261} | Array<'*' | {
1262 [key: string]: string | number;
1263}>): AnimationStyleMetadata;
1264
1265/**
1266 * Declares an animation transition which is played when a certain specified condition is met.
1267 *
1268 * @param stateChangeExpr A string with a specific format or a function that specifies when the
1269 * animation transition should occur (see [State Change Expression](#state-change-expression)).
1270 *
1271 * @param steps One or more animation objects that represent the animation's instructions.
1272 *
1273 * @param options An options object that can be used to specify a delay for the animation or provide
1274 * custom parameters for it.
1275 *
1276 * @returns An object that encapsulates the transition data.
1277 *
1278 * @usageNotes
1279 *
1280 * ### State Change Expression
1281 *
1282 * The State Change Expression instructs Angular when to run the transition's animations, it can
1283 *either be
1284 * - a string with a specific syntax
1285 * - or a function that compares the previous and current state (value of the expression bound to
1286 * the element's trigger) and returns `true` if the transition should occur or `false` otherwise
1287 *
1288 * The string format can be:
1289 * - `fromState => toState`, which indicates that the transition's animations should occur then the
1290 * expression bound to the trigger's element goes from `fromState` to `toState`
1291 *
1292 * _Example:_
1293 * ```typescript
1294 * transition('open => closed', animate('.5s ease-out', style({ height: 0 }) ))
1295 * ```
1296 *
1297 * - `fromState <=> toState`, which indicates that the transition's animations should occur then
1298 * the expression bound to the trigger's element goes from `fromState` to `toState` or vice versa
1299 *
1300 * _Example:_
1301 * ```typescript
1302 * transition('enabled <=> disabled', animate('1s cubic-bezier(0.8,0.3,0,1)'))
1303 * ```
1304 *
1305 * - `:enter`/`:leave`, which indicates that the transition's animations should occur when the
1306 * element enters or exists the DOM
1307 *
1308 * _Example:_
1309 * ```typescript
1310 * transition(':enter', [
1311 * style({ opacity: 0 }),
1312 * animate('500ms', style({ opacity: 1 }))
1313 * ])
1314 * ```
1315 *
1316 * - `:increment`/`:decrement`, which indicates that the transition's animations should occur when
1317 * the numerical expression bound to the trigger's element has increased in value or decreased
1318 *
1319 * _Example:_
1320 * ```typescript
1321 * transition(':increment', query('@counter', animateChild()))
1322 * ```
1323 *
1324 * - a sequence of any of the above divided by commas, which indicates that transition's animations
1325 * should occur whenever one of the state change expressions matches
1326 *
1327 * _Example:_
1328 * ```typescript
1329 * transition(':increment, * => enabled, :enter', animate('1s ease', keyframes([
1330 * style({ transform: 'scale(1)', offset: 0}),
1331 * style({ transform: 'scale(1.1)', offset: 0.7}),
1332 * style({ transform: 'scale(1)', offset: 1})
1333 * ]))),
1334 * ```
1335 *
1336 * Also note that in such context:
1337 * - `void` can be used to indicate the absence of the element
1338 * - asterisks can be used as wildcards that match any state
1339 * - (as a consequence of the above, `void => *` is equivalent to `:enter` and `* => void` is
1340 * equivalent to `:leave`)
1341 * - `true` and `false` also match expression values of `1` and `0` respectively (but do not match
1342 * _truthy_ and _falsy_ values)
1343 *
1344 * <div class="alert is-helpful">
1345 *
1346 * Be careful about entering end leaving elements as their transitions present a common
1347 * pitfall for developers.
1348 *
1349 * Note that when an element with a trigger enters the DOM its `:enter` transition always
1350 * gets executed, but its `:leave` transition will not be executed if the element is removed
1351 * alongside its parent (as it will be removed "without warning" before its transition has
1352 * a chance to be executed, the only way that such transition can occur is if the element
1353 * is exiting the DOM on its own).
1354 *
1355 *
1356 * </div>
1357 *
1358 * ### Animating to a Final State
1359 *
1360 * If the final step in a transition is a call to `animate()` that uses a timing value
1361 * with no `style` data, that step is automatically considered the final animation arc,
1362 * for the element to reach the final state, in such case Angular automatically adds or removes
1363 * CSS styles to ensure that the element is in the correct final state.
1364 *
1365 *
1366 * ### Usage Examples
1367 *
1368 * - Transition animations applied based on
1369 * the trigger's expression value
1370 *
1371 * ```html
1372 * <div [@myAnimationTrigger]="myStatusExp">
1373 * ...
1374 * </div>
1375 * ```
1376 *
1377 * ```typescript
1378 * trigger("myAnimationTrigger", [
1379 * ..., // states
1380 * transition("on => off, open => closed", animate(500)),
1381 * transition("* <=> error", query('.indicator', animateChild()))
1382 * ])
1383 * ```
1384 *
1385 * - Transition animations applied based on custom logic dependent
1386 * on the trigger's expression value and provided parameters
1387 *
1388 * ```html
1389 * <div [@myAnimationTrigger]="{
1390 * value: stepName,
1391 * params: { target: currentTarget }
1392 * }">
1393 * ...
1394 * </div>
1395 * ```
1396 *
1397 * ```typescript
1398 * trigger("myAnimationTrigger", [
1399 * ..., // states
1400 * transition(
1401 * (fromState, toState, _element, params) =>
1402 * ['firststep', 'laststep'].includes(fromState.toLowerCase())
1403 * && toState === params?.['target'],
1404 * animate('1s')
1405 * )
1406 * ])
1407 * ```
1408 *
1409 * @publicApi
1410 **/
1411export declare function transition(stateChangeExpr: string | ((fromState: string, toState: string, element?: any, params?: {
1412 [key: string]: any;
1413}) => boolean), steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions | null): AnimationTransitionMetadata;
1414
1415/**
1416 * Creates a named animation trigger, containing a list of [`state()`](api/animations/state)
1417 * and `transition()` entries to be evaluated when the expression
1418 * bound to the trigger changes.
1419 *
1420 * @param name An identifying string.
1421 * @param definitions An animation definition object, containing an array of
1422 * [`state()`](api/animations/state) and `transition()` declarations.
1423 *
1424 * @return An object that encapsulates the trigger data.
1425 *
1426 * @usageNotes
1427 * Define an animation trigger in the `animations` section of `@Component` metadata.
1428 * In the template, reference the trigger by name and bind it to a trigger expression that
1429 * evaluates to a defined animation state, using the following format:
1430 *
1431 * `[@triggerName]="expression"`
1432 *
1433 * Animation trigger bindings convert all values to strings, and then match the
1434 * previous and current values against any linked transitions.
1435 * Booleans can be specified as `1` or `true` and `0` or `false`.
1436 *
1437 * ### Usage Example
1438 *
1439 * The following example creates an animation trigger reference based on the provided
1440 * name value.
1441 * The provided animation value is expected to be an array consisting of state and
1442 * transition declarations.
1443 *
1444 * ```typescript
1445 * @Component({
1446 * selector: "my-component",
1447 * templateUrl: "my-component-tpl.html",
1448 * animations: [
1449 * trigger("myAnimationTrigger", [
1450 * state(...),
1451 * state(...),
1452 * transition(...),
1453 * transition(...)
1454 * ])
1455 * ]
1456 * })
1457 * class MyComponent {
1458 * myStatusExp = "something";
1459 * }
1460 * ```
1461 *
1462 * The template associated with this component makes use of the defined trigger
1463 * by binding to an element within its template code.
1464 *
1465 * ```html
1466 * <!-- somewhere inside of my-component-tpl.html -->
1467 * <div [@myAnimationTrigger]="myStatusExp">...</div>
1468 * ```
1469 *
1470 * ### Using an inline function
1471 * The `transition` animation method also supports reading an inline function which can decide
1472 * if its associated animation should be run.
1473 *
1474 * ```typescript
1475 * // this method is run each time the `myAnimationTrigger` trigger value changes.
1476 * function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key:
1477 string]: any}): boolean {
1478 * // notice that `element` and `params` are also available here
1479 * return toState == 'yes-please-animate';
1480 * }
1481 *
1482 * @Component({
1483 * selector: 'my-component',
1484 * templateUrl: 'my-component-tpl.html',
1485 * animations: [
1486 * trigger('myAnimationTrigger', [
1487 * transition(myInlineMatcherFn, [
1488 * // the animation sequence code
1489 * ]),
1490 * ])
1491 * ]
1492 * })
1493 * class MyComponent {
1494 * myStatusExp = "yes-please-animate";
1495 * }
1496 * ```
1497 *
1498 * ### Disabling Animations
1499 * When true, the special animation control binding `@.disabled` binding prevents
1500 * all animations from rendering.
1501 * Place the `@.disabled` binding on an element to disable
1502 * animations on the element itself, as well as any inner animation triggers
1503 * within the element.
1504 *
1505 * The following example shows how to use this feature:
1506 *
1507 * ```typescript
1508 * @Component({
1509 * selector: 'my-component',
1510 * template: `
1511 * <div [@.disabled]="isDisabled">
1512 * <div [@childAnimation]="exp"></div>
1513 * </div>
1514 * `,
1515 * animations: [
1516 * trigger("childAnimation", [
1517 * // ...
1518 * ])
1519 * ]
1520 * })
1521 * class MyComponent {
1522 * isDisabled = true;
1523 * exp = '...';
1524 * }
1525 * ```
1526 *
1527 * When `@.disabled` is true, it prevents the `@childAnimation` trigger from animating,
1528 * along with any inner animations.
1529 *
1530 * ### Disable animations application-wide
1531 * When an area of the template is set to have animations disabled,
1532 * **all** inner components have their animations disabled as well.
1533 * This means that you can disable all animations for an app
1534 * by placing a host binding set on `@.disabled` on the topmost Angular component.
1535 *
1536 * ```typescript
1537 * import {Component, HostBinding} from '@angular/core';
1538 *
1539 * @Component({
1540 * selector: 'app-component',
1541 * templateUrl: 'app.component.html',
1542 * })
1543 * class AppComponent {
1544 * @HostBinding('@.disabled')
1545 * public animationsDisabled = true;
1546 * }
1547 * ```
1548 *
1549 * ### Overriding disablement of inner animations
1550 * Despite inner animations being disabled, a parent animation can `query()`
1551 * for inner elements located in disabled areas of the template and still animate
1552 * them if needed. This is also the case for when a sub animation is
1553 * queried by a parent and then later animated using `animateChild()`.
1554 *
1555 * ### Detecting when an animation is disabled
1556 * If a region of the DOM (or the entire application) has its animations disabled, the animation
1557 * trigger callbacks still fire, but for zero seconds. When the callback fires, it provides
1558 * an instance of an `AnimationEvent`. If animations are disabled,
1559 * the `.disabled` flag on the event is true.
1560 *
1561 * @publicApi
1562 */
1563export declare function trigger(name: string, definitions: AnimationMetadata[]): AnimationTriggerMetadata;
1564
1565/**
1566 * Starts a reusable animation that is created using the `animation()` function.
1567 *
1568 * @param animation The reusable animation to start.
1569 * @param options An options object that can contain a delay value for the start of
1570 * the animation, and additional override values for developer-defined parameters.
1571 * @return An object that contains the animation parameters.
1572 *
1573 * @publicApi
1574 */
1575export declare function useAnimation(animation: AnimationReferenceMetadata, options?: AnimationOptions | null): AnimationAnimateRefMetadata;
1576
1577/**
1578 * A programmatic controller for a group of reusable animations.
1579 * Used internally to control animations.
1580 *
1581 * @see {@link AnimationPlayer}
1582 * @see {@link animations/group group}
1583 *
1584 */
1585export declare class ɵAnimationGroupPlayer implements AnimationPlayer {
1586 private _onDoneFns;
1587 private _onStartFns;
1588 private _finished;
1589 private _started;
1590 private _destroyed;
1591 private _onDestroyFns;
1592 parentPlayer: AnimationPlayer | null;
1593 totalTime: number;
1594 readonly players: AnimationPlayer[];
1595 constructor(_players: AnimationPlayer[]);
1596 private _onFinish;
1597 init(): void;
1598 onStart(fn: () => void): void;
1599 private _onStart;
1600 onDone(fn: () => void): void;
1601 onDestroy(fn: () => void): void;
1602 hasStarted(): boolean;
1603 play(): void;
1604 pause(): void;
1605 restart(): void;
1606 finish(): void;
1607 destroy(): void;
1608 private _onDestroy;
1609 reset(): void;
1610 setPosition(p: number): void;
1611 getPosition(): number;
1612 beforeDestroy(): void;
1613}
1614
1615export declare class ɵBrowserAnimationBuilder extends AnimationBuilder {
1616 private animationModuleType;
1617 private _nextAnimationId;
1618 private _renderer;
1619 constructor(rootRenderer: RendererFactory2, doc: Document);
1620 build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory;
1621 static ɵfac: i0.ɵɵFactoryDeclaration<ɵBrowserAnimationBuilder, never>;
1622 static ɵprov: i0.ɵɵInjectableDeclaration<ɵBrowserAnimationBuilder>;
1623}
1624
1625export declare const ɵPRE_STYLE = "!";
1626
1627
1628/**
1629 * The list of error codes used in runtime code of the `animations` package.
1630 * Reserved error code range: 3000-3999.
1631 */
1632export declare const enum ɵRuntimeErrorCode {
1633 INVALID_TIMING_VALUE = 3000,
1634 INVALID_STYLE_PARAMS = 3001,
1635 INVALID_STYLE_VALUE = 3002,
1636 INVALID_PARAM_VALUE = 3003,
1637 INVALID_NODE_TYPE = 3004,
1638 INVALID_CSS_UNIT_VALUE = 3005,
1639 INVALID_TRIGGER = 3006,
1640 INVALID_DEFINITION = 3007,
1641 INVALID_STATE = 3008,
1642 INVALID_PROPERTY = 3009,
1643 INVALID_PARALLEL_ANIMATION = 3010,
1644 INVALID_KEYFRAMES = 3011,
1645 INVALID_OFFSET = 3012,
1646 INVALID_STAGGER = 3013,
1647 INVALID_QUERY = 3014,
1648 INVALID_EXPRESSION = 3015,
1649 INVALID_TRANSITION_ALIAS = 3016,
1650 NEGATIVE_STEP_VALUE = 3100,
1651 NEGATIVE_DELAY_VALUE = 3101,
1652 KEYFRAME_OFFSETS_OUT_OF_ORDER = 3200,
1653 KEYFRAMES_MISSING_OFFSETS = 3202,
1654 MISSING_OR_DESTROYED_ANIMATION = 3300,
1655 MISSING_PLAYER = 3301,
1656 MISSING_TRIGGER = 3302,
1657 MISSING_EVENT = 3303,
1658 UNSUPPORTED_TRIGGER_EVENT = 3400,
1659 UNREGISTERED_TRIGGER = 3401,
1660 TRIGGER_TRANSITIONS_FAILED = 3402,
1661 TRIGGER_PARSING_FAILED = 3403,
1662 TRIGGER_BUILD_FAILED = 3404,
1663 VALIDATION_FAILED = 3500,
1664 BUILDING_FAILED = 3501,
1665 ANIMATION_FAILED = 3502,
1666 REGISTRATION_FAILED = 3503,
1667 CREATE_ANIMATION_FAILED = 3504,
1668 TRANSITION_FAILED = 3505,
1669 BROWSER_ANIMATION_BUILDER_INJECTED_WITHOUT_ANIMATIONS = 3600
1670}
1671
1672
1673/**
1674 * Represents a set of CSS styles for use in an animation style as a generic.
1675 */
1676export declare interface ɵStyleData {
1677 [key: string]: string | number;
1678}
1679
1680/**
1681 * Represents a set of CSS styles for use in an animation style as a Map.
1682 */
1683export declare type ɵStyleDataMap = Map<string, string | number>;
1684
1685export { }
1686
\No newline at end of file