UNPKG

53.8 kBTypeScriptView Raw
1/**
2 * @license Angular v17.3.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 * @see {@link ɵAnimationGroupPlayer AnimationGroupPlayer}
914 *
915 * @publicApi
916 */
917export declare class NoopAnimationPlayer implements AnimationPlayer {
918 private _onDoneFns;
919 private _onStartFns;
920 private _onDestroyFns;
921 private _originalOnDoneFns;
922 private _originalOnStartFns;
923 private _started;
924 private _destroyed;
925 private _finished;
926 private _position;
927 parentPlayer: AnimationPlayer | null;
928 readonly totalTime: number;
929 constructor(duration?: number, delay?: number);
930 private _onFinish;
931 onStart(fn: () => void): void;
932 onDone(fn: () => void): void;
933 onDestroy(fn: () => void): void;
934 hasStarted(): boolean;
935 init(): void;
936 play(): void;
937 private _onStart;
938 pause(): void;
939 restart(): void;
940 finish(): void;
941 destroy(): void;
942 reset(): void;
943 setPosition(position: number): void;
944 getPosition(): number;
945}
946
947/**
948 * Finds one or more inner elements within the current element that is
949 * being animated within a sequence. Use with `animate()`.
950 *
951 * @param selector The element to query, or a set of elements that contain Angular-specific
952 * characteristics, specified with one or more of the following tokens.
953 * - `query(":enter")` or `query(":leave")` : Query for newly inserted/removed elements (not
954 * all elements can be queried via these tokens, see
955 * [Entering and Leaving Elements](#entering-and-leaving-elements))
956 * - `query(":animating")` : Query all currently animating elements.
957 * - `query("@triggerName")` : Query elements that contain an animation trigger.
958 * - `query("@*")` : Query all elements that contain an animation triggers.
959 * - `query(":self")` : Include the current element into the animation sequence.
960 *
961 * @param animation One or more animation steps to apply to the queried element or elements.
962 * An array is treated as an animation sequence.
963 * @param options An options object. Use the 'limit' field to limit the total number of
964 * items to collect.
965 * @return An object that encapsulates the query data.
966 *
967 * @usageNotes
968 *
969 * ### Multiple Tokens
970 *
971 * Tokens can be merged into a combined query selector string. For example:
972 *
973 * ```typescript
974 * query(':self, .record:enter, .record:leave, @subTrigger', [...])
975 * ```
976 *
977 * The `query()` function collects multiple elements and works internally by using
978 * `element.querySelectorAll`. Use the `limit` field of an options object to limit
979 * the total number of items to be collected. For example:
980 *
981 * ```js
982 * query('div', [
983 * animate(...),
984 * animate(...)
985 * ], { limit: 1 })
986 * ```
987 *
988 * By default, throws an error when zero items are found. Set the
989 * `optional` flag to ignore this error. For example:
990 *
991 * ```js
992 * query('.some-element-that-may-not-be-there', [
993 * animate(...),
994 * animate(...)
995 * ], { optional: true })
996 * ```
997 *
998 * ### Entering and Leaving Elements
999 *
1000 * Not all elements can be queried via the `:enter` and `:leave` tokens, the only ones
1001 * that can are those that Angular assumes can enter/leave based on their own logic
1002 * (if their insertion/removal is simply a consequence of that of their parent they
1003 * should be queried via a different token in their parent's `:enter`/`:leave` transitions).
1004 *
1005 * The only elements Angular assumes can enter/leave based on their own logic (thus the only
1006 * ones that can be queried via the `:enter` and `:leave` tokens) are:
1007 * - Those inserted dynamically (via `ViewContainerRef`)
1008 * - Those that have a structural directive (which, under the hood, are a subset of the above ones)
1009 *
1010 * <div class="alert is-helpful">
1011 *
1012 * Note that elements will be successfully queried via `:enter`/`:leave` even if their
1013 * insertion/removal is not done manually via `ViewContainerRef`or caused by their structural
1014 * directive (e.g. they enter/exit alongside their parent).
1015 *
1016 * </div>
1017 *
1018 * <div class="alert is-important">
1019 *
1020 * There is an exception to what previously mentioned, besides elements entering/leaving based on
1021 * their own logic, elements with an animation trigger can always be queried via `:leave` when
1022 * their parent is also leaving.
1023 *
1024 * </div>
1025 *
1026 * ### Usage Example
1027 *
1028 * The following example queries for inner elements and animates them
1029 * individually using `animate()`.
1030 *
1031 * ```typescript
1032 * @Component({
1033 * selector: 'inner',
1034 * template: `
1035 * <div [@queryAnimation]="exp">
1036 * <h1>Title</h1>
1037 * <div class="content">
1038 * Blah blah blah
1039 * </div>
1040 * </div>
1041 * `,
1042 * animations: [
1043 * trigger('queryAnimation', [
1044 * transition('* => goAnimate', [
1045 * // hide the inner elements
1046 * query('h1', style({ opacity: 0 })),
1047 * query('.content', style({ opacity: 0 })),
1048 *
1049 * // animate the inner elements in, one by one
1050 * query('h1', animate(1000, style({ opacity: 1 }))),
1051 * query('.content', animate(1000, style({ opacity: 1 }))),
1052 * ])
1053 * ])
1054 * ]
1055 * })
1056 * class Cmp {
1057 * exp = '';
1058 *
1059 * goAnimate() {
1060 * this.exp = 'goAnimate';
1061 * }
1062 * }
1063 * ```
1064 *
1065 * @publicApi
1066 */
1067export declare function query(selector: string, animation: AnimationMetadata | AnimationMetadata[], options?: AnimationQueryOptions | null): AnimationQueryMetadata;
1068
1069/**
1070 * Defines a list of animation steps to be run sequentially, one by one.
1071 *
1072 * @param steps An array of animation step objects.
1073 * - Steps defined by `style()` calls apply the styling data immediately.
1074 * - Steps defined by `animate()` calls apply the styling data over time
1075 * as specified by the timing data.
1076 *
1077 * ```typescript
1078 * sequence([
1079 * style({ opacity: 0 }),
1080 * animate("1s", style({ opacity: 1 }))
1081 * ])
1082 * ```
1083 *
1084 * @param options An options object containing a delay and
1085 * developer-defined parameters that provide styling defaults and
1086 * can be overridden on invocation.
1087 *
1088 * @return An object that encapsulates the sequence data.
1089 *
1090 * @usageNotes
1091 * When you pass an array of steps to a
1092 * `transition()` call, the steps run sequentially by default.
1093 * Compare this to the `{@link animations/group group()}` call, which runs animation steps in
1094 *parallel.
1095 *
1096 * When a sequence is used within a `{@link animations/group group()}` or a `transition()` call,
1097 * execution continues to the next instruction only after each of the inner animation
1098 * steps have completed.
1099 *
1100 * @publicApi
1101 **/
1102export declare function sequence(steps: AnimationMetadata[], options?: AnimationOptions | null): AnimationSequenceMetadata;
1103
1104/**
1105 * Use within an animation `query()` call to issue a timing gap after
1106 * each queried item is animated.
1107 *
1108 * @param timings A delay value.
1109 * @param animation One ore more animation steps.
1110 * @returns An object that encapsulates the stagger data.
1111 *
1112 * @usageNotes
1113 * In the following example, a container element wraps a list of items stamped out
1114 * by an `ngFor`. The container element contains an animation trigger that will later be set
1115 * to query for each of the inner items.
1116 *
1117 * Each time items are added, the opacity fade-in animation runs,
1118 * and each removed item is faded out.
1119 * When either of these animations occur, the stagger effect is
1120 * applied after each item's animation is started.
1121 *
1122 * ```html
1123 * <!-- list.component.html -->
1124 * <button (click)="toggle()">Show / Hide Items</button>
1125 * <hr />
1126 * <div [@listAnimation]="items.length">
1127 * <div *ngFor="let item of items">
1128 * {{ item }}
1129 * </div>
1130 * </div>
1131 * ```
1132 *
1133 * Here is the component code:
1134 *
1135 * ```typescript
1136 * import {trigger, transition, style, animate, query, stagger} from '@angular/animations';
1137 * @Component({
1138 * templateUrl: 'list.component.html',
1139 * animations: [
1140 * trigger('listAnimation', [
1141 * ...
1142 * ])
1143 * ]
1144 * })
1145 * class ListComponent {
1146 * items = [];
1147 *
1148 * showItems() {
1149 * this.items = [0,1,2,3,4];
1150 * }
1151 *
1152 * hideItems() {
1153 * this.items = [];
1154 * }
1155 *
1156 * toggle() {
1157 * this.items.length ? this.hideItems() : this.showItems();
1158 * }
1159 * }
1160 * ```
1161 *
1162 * Here is the animation trigger code:
1163 *
1164 * ```typescript
1165 * trigger('listAnimation', [
1166 * transition('* => *', [ // each time the binding value changes
1167 * query(':leave', [
1168 * stagger(100, [
1169 * animate('0.5s', style({ opacity: 0 }))
1170 * ])
1171 * ]),
1172 * query(':enter', [
1173 * style({ opacity: 0 }),
1174 * stagger(100, [
1175 * animate('0.5s', style({ opacity: 1 }))
1176 * ])
1177 * ])
1178 * ])
1179 * ])
1180 * ```
1181 *
1182 * @publicApi
1183 */
1184export declare function stagger(timings: string | number, animation: AnimationMetadata | AnimationMetadata[]): AnimationStaggerMetadata;
1185
1186/**
1187 * Declares an animation state within a trigger attached to an element.
1188 *
1189 * @param name One or more names for the defined state in a comma-separated string.
1190 * The following reserved state names can be supplied to define a style for specific use
1191 * cases:
1192 *
1193 * - `void` You can associate styles with this name to be used when
1194 * the element is detached from the application. For example, when an `ngIf` evaluates
1195 * to false, the state of the associated element is void.
1196 * - `*` (asterisk) Indicates the default state. You can associate styles with this name
1197 * to be used as the fallback when the state that is being animated is not declared
1198 * within the trigger.
1199 *
1200 * @param styles A set of CSS styles associated with this state, created using the
1201 * `style()` function.
1202 * This set of styles persists on the element once the state has been reached.
1203 * @param options Parameters that can be passed to the state when it is invoked.
1204 * 0 or more key-value pairs.
1205 * @return An object that encapsulates the new state data.
1206 *
1207 * @usageNotes
1208 * Use the `trigger()` function to register states to an animation trigger.
1209 * Use the `transition()` function to animate between states.
1210 * When a state is active within a component, its associated styles persist on the element,
1211 * even when the animation ends.
1212 *
1213 * @publicApi
1214 **/
1215export declare function state(name: string, styles: AnimationStyleMetadata, options?: {
1216 params: {
1217 [name: string]: any;
1218 };
1219}): AnimationStateMetadata;
1220
1221/**
1222 * Declares a key/value object containing CSS properties/styles that
1223 * can then be used for an animation [`state`](api/animations/state), within an animation
1224 *`sequence`, or as styling data for calls to `animate()` and `keyframes()`.
1225 *
1226 * @param tokens A set of CSS styles or HTML styles associated with an animation state.
1227 * The value can be any of the following:
1228 * - A key-value style pair associating a CSS property with a value.
1229 * - An array of key-value style pairs.
1230 * - An asterisk (*), to use auto-styling, where styles are derived from the element
1231 * being animated and applied to the animation when it starts.
1232 *
1233 * Auto-styling can be used to define a state that depends on layout or other
1234 * environmental factors.
1235 *
1236 * @return An object that encapsulates the style data.
1237 *
1238 * @usageNotes
1239 * The following examples create animation styles that collect a set of
1240 * CSS property values:
1241 *
1242 * ```typescript
1243 * // string values for CSS properties
1244 * style({ background: "red", color: "blue" })
1245 *
1246 * // numerical pixel values
1247 * style({ width: 100, height: 0 })
1248 * ```
1249 *
1250 * The following example uses auto-styling to allow an element to animate from
1251 * a height of 0 up to its full height:
1252 *
1253 * ```
1254 * style({ height: 0 }),
1255 * animate("1s", style({ height: "*" }))
1256 * ```
1257 *
1258 * @publicApi
1259 **/
1260export declare function style(tokens: '*' | {
1261 [key: string]: string | number;
1262} | Array<'*' | {
1263 [key: string]: string | number;
1264}>): AnimationStyleMetadata;
1265
1266/**
1267 * Declares an animation transition which is played when a certain specified condition is met.
1268 *
1269 * @param stateChangeExpr A string with a specific format or a function that specifies when the
1270 * animation transition should occur (see [State Change Expression](#state-change-expression)).
1271 *
1272 * @param steps One or more animation objects that represent the animation's instructions.
1273 *
1274 * @param options An options object that can be used to specify a delay for the animation or provide
1275 * custom parameters for it.
1276 *
1277 * @returns An object that encapsulates the transition data.
1278 *
1279 * @usageNotes
1280 *
1281 * ### State Change Expression
1282 *
1283 * The State Change Expression instructs Angular when to run the transition's animations, it can
1284 *either be
1285 * - a string with a specific syntax
1286 * - or a function that compares the previous and current state (value of the expression bound to
1287 * the element's trigger) and returns `true` if the transition should occur or `false` otherwise
1288 *
1289 * The string format can be:
1290 * - `fromState => toState`, which indicates that the transition's animations should occur then the
1291 * expression bound to the trigger's element goes from `fromState` to `toState`
1292 *
1293 * _Example:_
1294 * ```typescript
1295 * transition('open => closed', animate('.5s ease-out', style({ height: 0 }) ))
1296 * ```
1297 *
1298 * - `fromState <=> toState`, which indicates that the transition's animations should occur then
1299 * the expression bound to the trigger's element goes from `fromState` to `toState` or vice versa
1300 *
1301 * _Example:_
1302 * ```typescript
1303 * transition('enabled <=> disabled', animate('1s cubic-bezier(0.8,0.3,0,1)'))
1304 * ```
1305 *
1306 * - `:enter`/`:leave`, which indicates that the transition's animations should occur when the
1307 * element enters or exists the DOM
1308 *
1309 * _Example:_
1310 * ```typescript
1311 * transition(':enter', [
1312 * style({ opacity: 0 }),
1313 * animate('500ms', style({ opacity: 1 }))
1314 * ])
1315 * ```
1316 *
1317 * - `:increment`/`:decrement`, which indicates that the transition's animations should occur when
1318 * the numerical expression bound to the trigger's element has increased in value or decreased
1319 *
1320 * _Example:_
1321 * ```typescript
1322 * transition(':increment', query('@counter', animateChild()))
1323 * ```
1324 *
1325 * - a sequence of any of the above divided by commas, which indicates that transition's animations
1326 * should occur whenever one of the state change expressions matches
1327 *
1328 * _Example:_
1329 * ```typescript
1330 * transition(':increment, * => enabled, :enter', animate('1s ease', keyframes([
1331 * style({ transform: 'scale(1)', offset: 0}),
1332 * style({ transform: 'scale(1.1)', offset: 0.7}),
1333 * style({ transform: 'scale(1)', offset: 1})
1334 * ]))),
1335 * ```
1336 *
1337 * Also note that in such context:
1338 * - `void` can be used to indicate the absence of the element
1339 * - asterisks can be used as wildcards that match any state
1340 * - (as a consequence of the above, `void => *` is equivalent to `:enter` and `* => void` is
1341 * equivalent to `:leave`)
1342 * - `true` and `false` also match expression values of `1` and `0` respectively (but do not match
1343 * _truthy_ and _falsy_ values)
1344 *
1345 * <div class="alert is-helpful">
1346 *
1347 * Be careful about entering end leaving elements as their transitions present a common
1348 * pitfall for developers.
1349 *
1350 * Note that when an element with a trigger enters the DOM its `:enter` transition always
1351 * gets executed, but its `:leave` transition will not be executed if the element is removed
1352 * alongside its parent (as it will be removed "without warning" before its transition has
1353 * a chance to be executed, the only way that such transition can occur is if the element
1354 * is exiting the DOM on its own).
1355 *
1356 *
1357 * </div>
1358 *
1359 * ### Animating to a Final State
1360 *
1361 * If the final step in a transition is a call to `animate()` that uses a timing value
1362 * with no `style` data, that step is automatically considered the final animation arc,
1363 * for the element to reach the final state, in such case Angular automatically adds or removes
1364 * CSS styles to ensure that the element is in the correct final state.
1365 *
1366 *
1367 * ### Usage Examples
1368 *
1369 * - Transition animations applied based on
1370 * the trigger's expression value
1371 *
1372 * ```HTML
1373 * <div [@myAnimationTrigger]="myStatusExp">
1374 * ...
1375 * </div>
1376 * ```
1377 *
1378 * ```typescript
1379 * trigger("myAnimationTrigger", [
1380 * ..., // states
1381 * transition("on => off, open => closed", animate(500)),
1382 * transition("* <=> error", query('.indicator', animateChild()))
1383 * ])
1384 * ```
1385 *
1386 * - Transition animations applied based on custom logic dependent
1387 * on the trigger's expression value and provided parameters
1388 *
1389 * ```HTML
1390 * <div [@myAnimationTrigger]="{
1391 * value: stepName,
1392 * params: { target: currentTarget }
1393 * }">
1394 * ...
1395 * </div>
1396 * ```
1397 *
1398 * ```typescript
1399 * trigger("myAnimationTrigger", [
1400 * ..., // states
1401 * transition(
1402 * (fromState, toState, _element, params) =>
1403 * ['firststep', 'laststep'].includes(fromState.toLowerCase())
1404 * && toState === params?.['target'],
1405 * animate('1s')
1406 * )
1407 * ])
1408 * ```
1409 *
1410 * @publicApi
1411 **/
1412export declare function transition(stateChangeExpr: string | ((fromState: string, toState: string, element?: any, params?: {
1413 [key: string]: any;
1414}) => boolean), steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions | null): AnimationTransitionMetadata;
1415
1416/**
1417 * Creates a named animation trigger, containing a list of [`state()`](api/animations/state)
1418 * and `transition()` entries to be evaluated when the expression
1419 * bound to the trigger changes.
1420 *
1421 * @param name An identifying string.
1422 * @param definitions An animation definition object, containing an array of
1423 * [`state()`](api/animations/state) and `transition()` declarations.
1424 *
1425 * @return An object that encapsulates the trigger data.
1426 *
1427 * @usageNotes
1428 * Define an animation trigger in the `animations` section of `@Component` metadata.
1429 * In the template, reference the trigger by name and bind it to a trigger expression that
1430 * evaluates to a defined animation state, using the following format:
1431 *
1432 * `[@triggerName]="expression"`
1433 *
1434 * Animation trigger bindings convert all values to strings, and then match the
1435 * previous and current values against any linked transitions.
1436 * Booleans can be specified as `1` or `true` and `0` or `false`.
1437 *
1438 * ### Usage Example
1439 *
1440 * The following example creates an animation trigger reference based on the provided
1441 * name value.
1442 * The provided animation value is expected to be an array consisting of state and
1443 * transition declarations.
1444 *
1445 * ```typescript
1446 * @Component({
1447 * selector: "my-component",
1448 * templateUrl: "my-component-tpl.html",
1449 * animations: [
1450 * trigger("myAnimationTrigger", [
1451 * state(...),
1452 * state(...),
1453 * transition(...),
1454 * transition(...)
1455 * ])
1456 * ]
1457 * })
1458 * class MyComponent {
1459 * myStatusExp = "something";
1460 * }
1461 * ```
1462 *
1463 * The template associated with this component makes use of the defined trigger
1464 * by binding to an element within its template code.
1465 *
1466 * ```html
1467 * <!-- somewhere inside of my-component-tpl.html -->
1468 * <div [@myAnimationTrigger]="myStatusExp">...</div>
1469 * ```
1470 *
1471 * ### Using an inline function
1472 * The `transition` animation method also supports reading an inline function which can decide
1473 * if its associated animation should be run.
1474 *
1475 * ```typescript
1476 * // this method is run each time the `myAnimationTrigger` trigger value changes.
1477 * function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key:
1478 string]: any}): boolean {
1479 * // notice that `element` and `params` are also available here
1480 * return toState == 'yes-please-animate';
1481 * }
1482 *
1483 * @Component({
1484 * selector: 'my-component',
1485 * templateUrl: 'my-component-tpl.html',
1486 * animations: [
1487 * trigger('myAnimationTrigger', [
1488 * transition(myInlineMatcherFn, [
1489 * // the animation sequence code
1490 * ]),
1491 * ])
1492 * ]
1493 * })
1494 * class MyComponent {
1495 * myStatusExp = "yes-please-animate";
1496 * }
1497 * ```
1498 *
1499 * ### Disabling Animations
1500 * When true, the special animation control binding `@.disabled` binding prevents
1501 * all animations from rendering.
1502 * Place the `@.disabled` binding on an element to disable
1503 * animations on the element itself, as well as any inner animation triggers
1504 * within the element.
1505 *
1506 * The following example shows how to use this feature:
1507 *
1508 * ```typescript
1509 * @Component({
1510 * selector: 'my-component',
1511 * template: `
1512 * <div [@.disabled]="isDisabled">
1513 * <div [@childAnimation]="exp"></div>
1514 * </div>
1515 * `,
1516 * animations: [
1517 * trigger("childAnimation", [
1518 * // ...
1519 * ])
1520 * ]
1521 * })
1522 * class MyComponent {
1523 * isDisabled = true;
1524 * exp = '...';
1525 * }
1526 * ```
1527 *
1528 * When `@.disabled` is true, it prevents the `@childAnimation` trigger from animating,
1529 * along with any inner animations.
1530 *
1531 * ### Disable animations application-wide
1532 * When an area of the template is set to have animations disabled,
1533 * **all** inner components have their animations disabled as well.
1534 * This means that you can disable all animations for an app
1535 * by placing a host binding set on `@.disabled` on the topmost Angular component.
1536 *
1537 * ```typescript
1538 * import {Component, HostBinding} from '@angular/core';
1539 *
1540 * @Component({
1541 * selector: 'app-component',
1542 * templateUrl: 'app.component.html',
1543 * })
1544 * class AppComponent {
1545 * @HostBinding('@.disabled')
1546 * public animationsDisabled = true;
1547 * }
1548 * ```
1549 *
1550 * ### Overriding disablement of inner animations
1551 * Despite inner animations being disabled, a parent animation can `query()`
1552 * for inner elements located in disabled areas of the template and still animate
1553 * them if needed. This is also the case for when a sub animation is
1554 * queried by a parent and then later animated using `animateChild()`.
1555 *
1556 * ### Detecting when an animation is disabled
1557 * If a region of the DOM (or the entire application) has its animations disabled, the animation
1558 * trigger callbacks still fire, but for zero seconds. When the callback fires, it provides
1559 * an instance of an `AnimationEvent`. If animations are disabled,
1560 * the `.disabled` flag on the event is true.
1561 *
1562 * @publicApi
1563 */
1564export declare function trigger(name: string, definitions: AnimationMetadata[]): AnimationTriggerMetadata;
1565
1566/**
1567 * Starts a reusable animation that is created using the `animation()` function.
1568 *
1569 * @param animation The reusable animation to start.
1570 * @param options An options object that can contain a delay value for the start of
1571 * the animation, and additional override values for developer-defined parameters.
1572 * @return An object that contains the animation parameters.
1573 *
1574 * @publicApi
1575 */
1576export declare function useAnimation(animation: AnimationReferenceMetadata, options?: AnimationOptions | null): AnimationAnimateRefMetadata;
1577
1578/**
1579 * A programmatic controller for a group of reusable animations.
1580 * Used internally to control animations.
1581 *
1582 * @see {@link AnimationPlayer}
1583 * @see {@link animations/group group}
1584 *
1585 */
1586export declare class ɵAnimationGroupPlayer implements AnimationPlayer {
1587 private _onDoneFns;
1588 private _onStartFns;
1589 private _finished;
1590 private _started;
1591 private _destroyed;
1592 private _onDestroyFns;
1593 parentPlayer: AnimationPlayer | null;
1594 totalTime: number;
1595 readonly players: AnimationPlayer[];
1596 constructor(_players: AnimationPlayer[]);
1597 private _onFinish;
1598 init(): void;
1599 onStart(fn: () => void): void;
1600 private _onStart;
1601 onDone(fn: () => void): void;
1602 onDestroy(fn: () => void): void;
1603 hasStarted(): boolean;
1604 play(): void;
1605 pause(): void;
1606 restart(): void;
1607 finish(): void;
1608 destroy(): void;
1609 private _onDestroy;
1610 reset(): void;
1611 setPosition(p: number): void;
1612 getPosition(): number;
1613 beforeDestroy(): void;
1614}
1615
1616export declare class ɵBrowserAnimationBuilder extends AnimationBuilder {
1617 private animationModuleType;
1618 private _nextAnimationId;
1619 private _renderer;
1620 constructor(rootRenderer: RendererFactory2, doc: Document);
1621 build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory;
1622 static ɵfac: i0.ɵɵFactoryDeclaration<ɵBrowserAnimationBuilder, never>;
1623 static ɵprov: i0.ɵɵInjectableDeclaration<ɵBrowserAnimationBuilder>;
1624}
1625
1626export declare const ɵPRE_STYLE = "!";
1627
1628
1629/**
1630 * The list of error codes used in runtime code of the `animations` package.
1631 * Reserved error code range: 3000-3999.
1632 */
1633export declare const enum ɵRuntimeErrorCode {
1634 INVALID_TIMING_VALUE = 3000,
1635 INVALID_STYLE_PARAMS = 3001,
1636 INVALID_STYLE_VALUE = 3002,
1637 INVALID_PARAM_VALUE = 3003,
1638 INVALID_NODE_TYPE = 3004,
1639 INVALID_CSS_UNIT_VALUE = 3005,
1640 INVALID_TRIGGER = 3006,
1641 INVALID_DEFINITION = 3007,
1642 INVALID_STATE = 3008,
1643 INVALID_PROPERTY = 3009,
1644 INVALID_PARALLEL_ANIMATION = 3010,
1645 INVALID_KEYFRAMES = 3011,
1646 INVALID_OFFSET = 3012,
1647 INVALID_STAGGER = 3013,
1648 INVALID_QUERY = 3014,
1649 INVALID_EXPRESSION = 3015,
1650 INVALID_TRANSITION_ALIAS = 3016,
1651 NEGATIVE_STEP_VALUE = 3100,
1652 NEGATIVE_DELAY_VALUE = 3101,
1653 KEYFRAME_OFFSETS_OUT_OF_ORDER = 3200,
1654 KEYFRAMES_MISSING_OFFSETS = 3202,
1655 MISSING_OR_DESTROYED_ANIMATION = 3300,
1656 MISSING_PLAYER = 3301,
1657 MISSING_TRIGGER = 3302,
1658 MISSING_EVENT = 3303,
1659 UNSUPPORTED_TRIGGER_EVENT = 3400,
1660 UNREGISTERED_TRIGGER = 3401,
1661 TRIGGER_TRANSITIONS_FAILED = 3402,
1662 TRIGGER_PARSING_FAILED = 3403,
1663 TRIGGER_BUILD_FAILED = 3404,
1664 VALIDATION_FAILED = 3500,
1665 BUILDING_FAILED = 3501,
1666 ANIMATION_FAILED = 3502,
1667 REGISTRATION_FAILED = 3503,
1668 CREATE_ANIMATION_FAILED = 3504,
1669 TRANSITION_FAILED = 3505,
1670 BROWSER_ANIMATION_BUILDER_INJECTED_WITHOUT_ANIMATIONS = 3600
1671}
1672
1673
1674/**
1675 * Represents a set of CSS styles for use in an animation style as a generic.
1676 */
1677export declare interface ɵStyleData {
1678 [key: string]: string | number;
1679}
1680
1681/**
1682 * Represents a set of CSS styles for use in an animation style as a Map.
1683 */
1684export declare type ɵStyleDataMap = Map<string, string | number>;
1685
1686export { }
1687
\No newline at end of file