/** * @license Angular v17.3.5 * (c) 2010-2024 Google LLC. https://angular.io/ * License: MIT */ import * as i0 from '@angular/core'; import { RendererFactory2 } from '@angular/core'; /** * Defines an animation step that combines styling information with timing information. * * @param timings Sets `AnimateTimings` for the parent animation. * A string in the format "duration [delay] [easing]". * - Duration and delay are expressed as a number and optional time unit, * such as "1s" or "10ms" for one second and 10 milliseconds, respectively. * The default unit is milliseconds. * - The easing value controls how the animation accelerates and decelerates * during its runtime. Value is one of `ease`, `ease-in`, `ease-out`, * `ease-in-out`, or a `cubic-bezier()` function call. * If not supplied, no easing is applied. * * For example, the string "1s 100ms ease-out" specifies a duration of * 1000 milliseconds, and delay of 100 ms, and the "ease-out" easing style, * which decelerates near the end of the duration. * @param styles Sets AnimationStyles for the parent animation. * A function call to either `style()` or `keyframes()` * that returns a collection of CSS style entries to be applied to the parent animation. * When null, uses the styles from the destination state. * This is useful when describing an animation step that will complete an animation; * see "Animating to the final state" in `transitions()`. * @returns An object that encapsulates the animation step. * * @usageNotes * Call within an animation `sequence()`, `{@link animations/group group()}`, or * `transition()` call to specify an animation step * that applies given style data to the parent animation for a given amount of time. * * ### Syntax Examples * **Timing examples** * * The following examples show various `timings` specifications. * - `animate(500)` : Duration is 500 milliseconds. * - `animate("1s")` : Duration is 1000 milliseconds. * - `animate("100ms 0.5s")` : Duration is 100 milliseconds, delay is 500 milliseconds. * - `animate("5s ease-in")` : Duration is 5000 milliseconds, easing in. * - `animate("5s 10ms cubic-bezier(.17,.67,.88,.1)")` : Duration is 5000 milliseconds, delay is 10 * milliseconds, easing according to a bezier curve. * * **Style examples** * * The following example calls `style()` to set a single CSS style. * ```typescript * animate(500, style({ background: "red" })) * ``` * The following example calls `keyframes()` to set a CSS style * to different values for successive keyframes. * ```typescript * animate(500, keyframes( * [ * style({ background: "blue" }), * style({ background: "red" }) * ]) * ``` * * @publicApi */ export declare function animate(timings: string | number, styles?: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null): AnimationAnimateMetadata; /** * Executes a queried inner animation element within an animation sequence. * * @param options An options object that can contain a delay value for the start of the * animation, and additional override values for developer-defined parameters. * @return An object that encapsulates the child animation data. * * @usageNotes * Each time an animation is triggered in Angular, the parent animation * has priority and any child animations are blocked. In order * for a child animation to run, the parent animation must query each of the elements * containing child animations, and run them using this function. * * Note that this feature is designed to be used with `query()` and it will only work * with animations that are assigned using the Angular animation library. CSS keyframes * and transitions are not handled by this API. * * @publicApi */ export declare function animateChild(options?: AnimateChildOptions | null): AnimationAnimateChildMetadata; /** * Adds duration options to control animation styling and timing for a child animation. * * @see {@link animateChild} * * @publicApi */ export declare interface AnimateChildOptions extends AnimationOptions { duration?: number | string; } /** * Represents animation-step timing parameters for an animation step. * @see {@link animate} * * @publicApi */ export declare type AnimateTimings = { /** * The full duration of an animation step. A number and optional time unit, * such as "1s" or "10ms" for one second and 10 milliseconds, respectively. * The default unit is milliseconds. */ duration: number; /** * The delay in applying an animation step. A number and optional time unit. * The default unit is milliseconds. */ delay: number; /** * An easing style that controls how an animations step accelerates * and decelerates during its run time. An easing function such as `cubic-bezier()`, * or one of the following constants: * - `ease-in` * - `ease-out` * - `ease-in-and-out` */ easing: string | null; }; /** * Produces a reusable animation that can be invoked in another animation or sequence, * by calling the `useAnimation()` function. * * @param steps One or more animation objects, as returned by the `animate()` * or `sequence()` function, that form a transformation from one state to another. * A sequence is used by default when you pass an array. * @param options An options object that can contain a delay value for the start of the * animation, and additional developer-defined parameters. * Provided values for additional parameters are used as defaults, * and override values can be passed to the caller on invocation. * @returns An object that encapsulates the animation data. * * @usageNotes * The following example defines a reusable animation, providing some default parameter * values. * * ```typescript * var fadeAnimation = animation([ * style({ opacity: '{{ start }}' }), * animate('{{ time }}', * style({ opacity: '{{ end }}'})) * ], * { params: { time: '1000ms', start: 0, end: 1 }}); * ``` * * The following invokes the defined animation with a call to `useAnimation()`, * passing in override parameter values. * * ```js * useAnimation(fadeAnimation, { * params: { * time: '2s', * start: 1, * end: 0 * } * }) * ``` * * If any of the passed-in parameter values are missing from this call, * the default values are used. If one or more parameter values are missing before a step is * animated, `useAnimation()` throws an error. * * @publicApi */ export declare function animation(steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions | null): AnimationReferenceMetadata; /** * Encapsulates a child animation, that can be run explicitly when the parent is run. * Instantiated and returned by the `animateChild` function. * * @publicApi */ export declare interface AnimationAnimateChildMetadata extends AnimationMetadata { /** * An options object containing a delay and * developer-defined parameters that provide styling defaults and * can be overridden on invocation. Default delay is 0. */ options: AnimationOptions | null; } /** * Encapsulates an animation step. Instantiated and returned by * the `animate()` function. * * @publicApi */ export declare interface AnimationAnimateMetadata extends AnimationMetadata { /** * The timing data for the step. */ timings: string | number | AnimateTimings; /** * A set of styles used in the step. */ styles: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null; } /** * Encapsulates a reusable animation. * Instantiated and returned by the `useAnimation()` function. * * @publicApi */ export declare interface AnimationAnimateRefMetadata extends AnimationMetadata { /** * An animation reference object. */ animation: AnimationReferenceMetadata; /** * An options object containing a delay and * developer-defined parameters that provide styling defaults and * can be overridden on invocation. Default delay is 0. */ options: AnimationOptions | null; } /** * An injectable service that produces an animation sequence programmatically within an * Angular component or directive. * Provided by the `BrowserAnimationsModule` or `NoopAnimationsModule`. * * @usageNotes * * To use this service, add it to your component or directive as a dependency. * The service is instantiated along with your component. * * Apps do not typically need to create their own animation players, but if you * do need to, follow these steps: * * 1. Use the [AnimationBuilder.build](api/animations/AnimationBuilder#build)() method * to create a programmatic animation. The method returns an `AnimationFactory` instance. * * 2. Use the factory object to create an `AnimationPlayer` and attach it to a DOM element. * * 3. Use the player object to control the animation programmatically. * * For example: * * ```ts * // import the service from BrowserAnimationsModule * import {AnimationBuilder} from '@angular/animations'; * // require the service as a dependency * class MyCmp { * constructor(private _builder: AnimationBuilder) {} * * makeAnimation(element: any) { * // first define a reusable animation * const myAnimation = this._builder.build([ * style({ width: 0 }), * animate(1000, style({ width: '100px' })) * ]); * * // use the returned factory object to create a player * const player = myAnimation.create(element); * * player.play(); * } * } * ``` * * @publicApi */ export declare abstract class AnimationBuilder { /** * Builds a factory for producing a defined animation. * @param animation A reusable animation definition. * @returns A factory object that can create a player for the defined animation. * @see {@link animate} */ abstract build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * An instance of this class is returned as an event parameter when an animation * callback is captured for an animation either during the start or done phase. * * ```typescript * @Component({ * host: { * '[@myAnimationTrigger]': 'someExpression', * '(@myAnimationTrigger.start)': 'captureStartEvent($event)', * '(@myAnimationTrigger.done)': 'captureDoneEvent($event)', * }, * animations: [ * trigger("myAnimationTrigger", [ * // ... * ]) * ] * }) * class MyComponent { * someExpression: any = false; * captureStartEvent(event: AnimationEvent) { * // the toState, fromState and totalTime data is accessible from the event variable * } * * captureDoneEvent(event: AnimationEvent) { * // the toState, fromState and totalTime data is accessible from the event variable * } * } * ``` * * @publicApi */ declare interface AnimationEvent_2 { /** * The name of the state from which the animation is triggered. */ fromState: string; /** * The name of the state in which the animation completes. */ toState: string; /** * The time it takes the animation to complete, in milliseconds. */ totalTime: number; /** * The animation phase in which the callback was invoked, one of * "start" or "done". */ phaseName: string; /** * The element to which the animation is attached. */ element: any; /** * Internal. */ triggerName: string; /** * Internal. */ disabled: boolean; } export { AnimationEvent_2 as AnimationEvent } /** * A factory object returned from the * [AnimationBuilder.build](api/animations/AnimationBuilder#build)() * method. * * @publicApi */ export declare abstract class AnimationFactory { /** * Creates an `AnimationPlayer` instance for the reusable animation defined by * the [AnimationBuilder.build](api/animations/AnimationBuilder#build)() * method that created this factory and attaches the new player a DOM element. * * @param element The DOM element to which to attach the player. * @param options A set of options that can include a time delay and * additional developer-defined parameters. */ abstract create(element: any, options?: AnimationOptions): AnimationPlayer; } /** * Encapsulates an animation group. * Instantiated and returned by the `{@link animations/group group()}` function. * * @publicApi */ export declare interface AnimationGroupMetadata extends AnimationMetadata { /** * One or more animation or style steps that form this group. */ steps: AnimationMetadata[]; /** * An options object containing a delay and * developer-defined parameters that provide styling defaults and * can be overridden on invocation. Default delay is 0. */ options: AnimationOptions | null; } /** * Encapsulates a keyframes sequence. Instantiated and returned by * the `keyframes()` function. * * @publicApi */ export declare interface AnimationKeyframesSequenceMetadata extends AnimationMetadata { /** * An array of animation styles. */ steps: AnimationStyleMetadata[]; } /** * Base for animation data structures. * * @publicApi */ export declare interface AnimationMetadata { type: AnimationMetadataType; } /** * @description Constants for the categories of parameters that can be defined for animations. * * A corresponding function defines a set of parameters for each category, and * collects them into a corresponding `AnimationMetadata` object. * * @publicApi */ export declare enum AnimationMetadataType { /** * Associates a named animation state with a set of CSS styles. * See [`state()`](api/animations/state) */ State = 0, /** * Data for a transition from one animation state to another. * See `transition()` */ Transition = 1, /** * Contains a set of animation steps. * See `sequence()` */ Sequence = 2, /** * Contains a set of animation steps. * See `{@link animations/group group()}` */ Group = 3, /** * Contains an animation step. * See `animate()` */ Animate = 4, /** * Contains a set of animation steps. * See `keyframes()` */ Keyframes = 5, /** * Contains a set of CSS property-value pairs into a named style. * See `style()` */ Style = 6, /** * Associates an animation with an entry trigger that can be attached to an element. * See `trigger()` */ Trigger = 7, /** * Contains a re-usable animation. * See `animation()` */ Reference = 8, /** * Contains data to use in executing child animations returned by a query. * See `animateChild()` */ AnimateChild = 9, /** * Contains animation parameters for a re-usable animation. * See `useAnimation()` */ AnimateRef = 10, /** * Contains child-animation query data. * See `query()` */ Query = 11, /** * Contains data for staggering an animation sequence. * See `stagger()` */ Stagger = 12 } /** * @description Options that control animation styling and timing. * * The following animation functions accept `AnimationOptions` data: * * - `transition()` * - `sequence()` * - `{@link animations/group group()}` * - `query()` * - `animation()` * - `useAnimation()` * - `animateChild()` * * Programmatic animations built using the `AnimationBuilder` service also * make use of `AnimationOptions`. * * @publicApi */ export declare interface AnimationOptions { /** * Sets a time-delay for initiating an animation action. * A number and optional time unit, such as "1s" or "10ms" for one second * and 10 milliseconds, respectively.The default unit is milliseconds. * Default value is 0, meaning no delay. */ delay?: number | string; /** * A set of developer-defined parameters that modify styling and timing * when an animation action starts. An array of key-value pairs, where the provided value * is used as a default. */ params?: { [name: string]: any; }; } /** * Provides programmatic control of a reusable animation sequence, * built using the [AnimationBuilder.build](api/animations/AnimationBuilder#build)() * method which returns an `AnimationFactory`, whose * [create](api/animations/AnimationFactory#create)() method instantiates and * initializes this interface. * * @see {@link AnimationBuilder} * @see {@link AnimationFactory} * @see {@link animate} * * @publicApi */ export declare interface AnimationPlayer { /** * Provides a callback to invoke when the animation finishes. * @param fn The callback function. * @see {@link #finish} */ onDone(fn: () => void): void; /** * Provides a callback to invoke when the animation starts. * @param fn The callback function. * @see {@link #play} */ onStart(fn: () => void): void; /** * Provides a callback to invoke after the animation is destroyed. * @param fn The callback function. * @see {@link #destroy} * @see {@link #beforeDestroy} */ onDestroy(fn: () => void): void; /** * Initializes the animation. */ init(): void; /** * Reports whether the animation has started. * @returns True if the animation has started, false otherwise. */ hasStarted(): boolean; /** * Runs the animation, invoking the `onStart()` callback. */ play(): void; /** * Pauses the animation. */ pause(): void; /** * Restarts the paused animation. */ restart(): void; /** * Ends the animation, invoking the `onDone()` callback. */ finish(): void; /** * Destroys the animation, after invoking the `beforeDestroy()` callback. * Calls the `onDestroy()` callback when destruction is completed. */ destroy(): void; /** * Resets the animation to its initial state. */ reset(): void; /** * Sets the position of the animation. * @param position A 0-based offset into the duration, in milliseconds. */ setPosition(position: number): void; /** * Reports the current position of the animation. * @returns A 0-based offset into the duration, in milliseconds. */ getPosition(): number; /** * The parent of this player, if any. */ parentPlayer: AnimationPlayer | null; /** * The total run time of the animation, in milliseconds. */ readonly totalTime: number; /** * Provides a callback to invoke before the animation is destroyed. */ beforeDestroy?: () => any; } /** * Encapsulates an animation query. Instantiated and returned by * the `query()` function. * * @publicApi */ export declare interface AnimationQueryMetadata extends AnimationMetadata { /** * The CSS selector for this query. */ selector: string; /** * One or more animation step objects. */ animation: AnimationMetadata | AnimationMetadata[]; /** * A query options object. */ options: AnimationQueryOptions | null; } /** * Encapsulates animation query options. * Passed to the `query()` function. * * @publicApi */ export declare interface AnimationQueryOptions extends AnimationOptions { /** * True if this query is optional, false if it is required. Default is false. * A required query throws an error if no elements are retrieved when * the query is executed. An optional query does not. * */ optional?: boolean; /** * A maximum total number of results to return from the query. * If negative, results are limited from the end of the query list towards the beginning. * By default, results are not limited. */ limit?: number; } /** * Encapsulates a reusable animation, which is a collection of individual animation steps. * Instantiated and returned by the `animation()` function, and * passed to the `useAnimation()` function. * * @publicApi */ export declare interface AnimationReferenceMetadata extends AnimationMetadata { /** * One or more animation step objects. */ animation: AnimationMetadata | AnimationMetadata[]; /** * An options object containing a delay and * developer-defined parameters that provide styling defaults and * can be overridden on invocation. Default delay is 0. */ options: AnimationOptions | null; } /** * Encapsulates an animation sequence. * Instantiated and returned by the `sequence()` function. * * @publicApi */ export declare interface AnimationSequenceMetadata extends AnimationMetadata { /** * An array of animation step objects. */ steps: AnimationMetadata[]; /** * An options object containing a delay and * developer-defined parameters that provide styling defaults and * can be overridden on invocation. Default delay is 0. */ options: AnimationOptions | null; } /** * Encapsulates parameters for staggering the start times of a set of animation steps. * Instantiated and returned by the `stagger()` function. * * @publicApi **/ export declare interface AnimationStaggerMetadata extends AnimationMetadata { /** * The timing data for the steps. */ timings: string | number; /** * One or more animation steps. */ animation: AnimationMetadata | AnimationMetadata[]; } /** * Encapsulates an animation state by associating a state name with a set of CSS styles. * Instantiated and returned by the [`state()`](api/animations/state) function. * * @publicApi */ export declare interface AnimationStateMetadata extends AnimationMetadata { /** * The state name, unique within the component. */ name: string; /** * The CSS styles associated with this state. */ styles: AnimationStyleMetadata; /** * An options object containing * developer-defined parameters that provide styling defaults and * can be overridden on invocation. */ options?: { params: { [name: string]: any; }; }; } /** * Encapsulates an animation style. Instantiated and returned by * the `style()` function. * * @publicApi */ export declare interface AnimationStyleMetadata extends AnimationMetadata { /** * A set of CSS style properties. */ styles: '*' | { [key: string]: string | number; } | Array<{ [key: string]: string | number; } | '*'>; /** * A percentage of the total animate time at which the style is to be applied. */ offset: number | null; } /** * Encapsulates an animation transition. Instantiated and returned by the * `transition()` function. * * @publicApi */ export declare interface AnimationTransitionMetadata extends AnimationMetadata { /** * An expression that describes a state change. */ expr: string | ((fromState: string, toState: string, element?: any, params?: { [key: string]: any; }) => boolean); /** * One or more animation objects to which this transition applies. */ animation: AnimationMetadata | AnimationMetadata[]; /** * An options object containing a delay and * developer-defined parameters that provide styling defaults and * can be overridden on invocation. Default delay is 0. */ options: AnimationOptions | null; } /** * Contains an animation trigger. Instantiated and returned by the * `trigger()` function. * * @publicApi */ export declare interface AnimationTriggerMetadata extends AnimationMetadata { /** * The trigger name, used to associate it with an element. Unique within the component. */ name: string; /** * An animation definition object, containing an array of state and transition declarations. */ definitions: AnimationMetadata[]; /** * An options object containing a delay and * developer-defined parameters that provide styling defaults and * can be overridden on invocation. Default delay is 0. */ options: { params?: { [name: string]: any; }; } | null; } /** * Specifies automatic styling. * * @publicApi */ export declare const AUTO_STYLE = "*"; /** * @description Defines a list of animation steps to be run in parallel. * * @param steps An array of animation step objects. * - When steps are defined by `style()` or `animate()` * function calls, each call within the group is executed instantly. * - To specify offset styles to be applied at a later time, define steps with * `keyframes()`, or use `animate()` calls with a delay value. * For example: * * ```typescript * group([ * animate("1s", style({ background: "black" })), * animate("2s", style({ color: "white" })) * ]) * ``` * * @param options An options object containing a delay and * developer-defined parameters that provide styling defaults and * can be overridden on invocation. * * @return An object that encapsulates the group data. * * @usageNotes * Grouped animations are useful when a series of styles must be * animated at different starting times and closed off at different ending times. * * When called within a `sequence()` or a * `transition()` call, does not continue to the next * instruction until all of the inner animation steps have completed. * * @publicApi */ export declare function group(steps: AnimationMetadata[], options?: AnimationOptions | null): AnimationGroupMetadata; /** * Defines a set of animation styles, associating each style with an optional `offset` value. * * @param steps A set of animation styles with optional offset data. * The optional `offset` value for a style specifies a percentage of the total animation * time at which that style is applied. * @returns An object that encapsulates the keyframes data. * * @usageNotes * Use with the `animate()` call. Instead of applying animations * from the current state * to the destination state, keyframes describe how each style entry is applied and at what point * within the animation arc. * Compare [CSS Keyframe Animations](https://www.w3schools.com/css/css3_animations.asp). * * ### Usage * * In the following example, the offset values describe * when each `backgroundColor` value is applied. The color is red at the start, and changes to * blue when 20% of the total time has elapsed. * * ```typescript * // the provided offset values * animate("5s", keyframes([ * style({ backgroundColor: "red", offset: 0 }), * style({ backgroundColor: "blue", offset: 0.2 }), * style({ backgroundColor: "orange", offset: 0.3 }), * style({ backgroundColor: "black", offset: 1 }) * ])) * ``` * * If there are no `offset` values specified in the style entries, the offsets * are calculated automatically. * * ```typescript * animate("5s", keyframes([ * style({ backgroundColor: "red" }) // offset = 0 * style({ backgroundColor: "blue" }) // offset = 0.33 * style({ backgroundColor: "orange" }) // offset = 0.66 * style({ backgroundColor: "black" }) // offset = 1 * ])) *``` * @publicApi */ export declare function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSequenceMetadata; /** * An empty programmatic controller for reusable animations. * Used internally when animations are disabled, to avoid * checking for the null case when an animation player is expected. * * @see {@link animate} * @see {@link AnimationPlayer} * @see {@link ɵAnimationGroupPlayer AnimationGroupPlayer} * * @publicApi */ export declare class NoopAnimationPlayer implements AnimationPlayer { private _onDoneFns; private _onStartFns; private _onDestroyFns; private _originalOnDoneFns; private _originalOnStartFns; private _started; private _destroyed; private _finished; private _position; parentPlayer: AnimationPlayer | null; readonly totalTime: number; constructor(duration?: number, delay?: number); private _onFinish; onStart(fn: () => void): void; onDone(fn: () => void): void; onDestroy(fn: () => void): void; hasStarted(): boolean; init(): void; play(): void; private _onStart; pause(): void; restart(): void; finish(): void; destroy(): void; reset(): void; setPosition(position: number): void; getPosition(): number; } /** * Finds one or more inner elements within the current element that is * being animated within a sequence. Use with `animate()`. * * @param selector The element to query, or a set of elements that contain Angular-specific * characteristics, specified with one or more of the following tokens. * - `query(":enter")` or `query(":leave")` : Query for newly inserted/removed elements (not * all elements can be queried via these tokens, see * [Entering and Leaving Elements](#entering-and-leaving-elements)) * - `query(":animating")` : Query all currently animating elements. * - `query("@triggerName")` : Query elements that contain an animation trigger. * - `query("@*")` : Query all elements that contain an animation triggers. * - `query(":self")` : Include the current element into the animation sequence. * * @param animation One or more animation steps to apply to the queried element or elements. * An array is treated as an animation sequence. * @param options An options object. Use the 'limit' field to limit the total number of * items to collect. * @return An object that encapsulates the query data. * * @usageNotes * * ### Multiple Tokens * * Tokens can be merged into a combined query selector string. For example: * * ```typescript * query(':self, .record:enter, .record:leave, @subTrigger', [...]) * ``` * * The `query()` function collects multiple elements and works internally by using * `element.querySelectorAll`. Use the `limit` field of an options object to limit * the total number of items to be collected. For example: * * ```js * query('div', [ * animate(...), * animate(...) * ], { limit: 1 }) * ``` * * By default, throws an error when zero items are found. Set the * `optional` flag to ignore this error. For example: * * ```js * query('.some-element-that-may-not-be-there', [ * animate(...), * animate(...) * ], { optional: true }) * ``` * * ### Entering and Leaving Elements * * Not all elements can be queried via the `:enter` and `:leave` tokens, the only ones * that can are those that Angular assumes can enter/leave based on their own logic * (if their insertion/removal is simply a consequence of that of their parent they * should be queried via a different token in their parent's `:enter`/`:leave` transitions). * * The only elements Angular assumes can enter/leave based on their own logic (thus the only * ones that can be queried via the `:enter` and `:leave` tokens) are: * - Those inserted dynamically (via `ViewContainerRef`) * - Those that have a structural directive (which, under the hood, are a subset of the above ones) * *
* * Note that elements will be successfully queried via `:enter`/`:leave` even if their * insertion/removal is not done manually via `ViewContainerRef`or caused by their structural * directive (e.g. they enter/exit alongside their parent). * *
* *
* * There is an exception to what previously mentioned, besides elements entering/leaving based on * their own logic, elements with an animation trigger can always be queried via `:leave` when * their parent is also leaving. * *
* * ### Usage Example * * The following example queries for inner elements and animates them * individually using `animate()`. * * ```typescript * @Component({ * selector: 'inner', * template: ` *
*

Title

*
* Blah blah blah *
*
* `, * animations: [ * trigger('queryAnimation', [ * transition('* => goAnimate', [ * // hide the inner elements * query('h1', style({ opacity: 0 })), * query('.content', style({ opacity: 0 })), * * // animate the inner elements in, one by one * query('h1', animate(1000, style({ opacity: 1 }))), * query('.content', animate(1000, style({ opacity: 1 }))), * ]) * ]) * ] * }) * class Cmp { * exp = ''; * * goAnimate() { * this.exp = 'goAnimate'; * } * } * ``` * * @publicApi */ export declare function query(selector: string, animation: AnimationMetadata | AnimationMetadata[], options?: AnimationQueryOptions | null): AnimationQueryMetadata; /** * Defines a list of animation steps to be run sequentially, one by one. * * @param steps An array of animation step objects. * - Steps defined by `style()` calls apply the styling data immediately. * - Steps defined by `animate()` calls apply the styling data over time * as specified by the timing data. * * ```typescript * sequence([ * style({ opacity: 0 }), * animate("1s", style({ opacity: 1 })) * ]) * ``` * * @param options An options object containing a delay and * developer-defined parameters that provide styling defaults and * can be overridden on invocation. * * @return An object that encapsulates the sequence data. * * @usageNotes * When you pass an array of steps to a * `transition()` call, the steps run sequentially by default. * Compare this to the `{@link animations/group group()}` call, which runs animation steps in *parallel. * * When a sequence is used within a `{@link animations/group group()}` or a `transition()` call, * execution continues to the next instruction only after each of the inner animation * steps have completed. * * @publicApi **/ export declare function sequence(steps: AnimationMetadata[], options?: AnimationOptions | null): AnimationSequenceMetadata; /** * Use within an animation `query()` call to issue a timing gap after * each queried item is animated. * * @param timings A delay value. * @param animation One ore more animation steps. * @returns An object that encapsulates the stagger data. * * @usageNotes * In the following example, a container element wraps a list of items stamped out * by an `ngFor`. The container element contains an animation trigger that will later be set * to query for each of the inner items. * * Each time items are added, the opacity fade-in animation runs, * and each removed item is faded out. * When either of these animations occur, the stagger effect is * applied after each item's animation is started. * * ```html * * *
*
*
* {{ item }} *
*
* ``` * * Here is the component code: * * ```typescript * import {trigger, transition, style, animate, query, stagger} from '@angular/animations'; * @Component({ * templateUrl: 'list.component.html', * animations: [ * trigger('listAnimation', [ * ... * ]) * ] * }) * class ListComponent { * items = []; * * showItems() { * this.items = [0,1,2,3,4]; * } * * hideItems() { * this.items = []; * } * * toggle() { * this.items.length ? this.hideItems() : this.showItems(); * } * } * ``` * * Here is the animation trigger code: * * ```typescript * trigger('listAnimation', [ * transition('* => *', [ // each time the binding value changes * query(':leave', [ * stagger(100, [ * animate('0.5s', style({ opacity: 0 })) * ]) * ]), * query(':enter', [ * style({ opacity: 0 }), * stagger(100, [ * animate('0.5s', style({ opacity: 1 })) * ]) * ]) * ]) * ]) * ``` * * @publicApi */ export declare function stagger(timings: string | number, animation: AnimationMetadata | AnimationMetadata[]): AnimationStaggerMetadata; /** * Declares an animation state within a trigger attached to an element. * * @param name One or more names for the defined state in a comma-separated string. * The following reserved state names can be supplied to define a style for specific use * cases: * * - `void` You can associate styles with this name to be used when * the element is detached from the application. For example, when an `ngIf` evaluates * to false, the state of the associated element is void. * - `*` (asterisk) Indicates the default state. You can associate styles with this name * to be used as the fallback when the state that is being animated is not declared * within the trigger. * * @param styles A set of CSS styles associated with this state, created using the * `style()` function. * This set of styles persists on the element once the state has been reached. * @param options Parameters that can be passed to the state when it is invoked. * 0 or more key-value pairs. * @return An object that encapsulates the new state data. * * @usageNotes * Use the `trigger()` function to register states to an animation trigger. * Use the `transition()` function to animate between states. * When a state is active within a component, its associated styles persist on the element, * even when the animation ends. * * @publicApi **/ export declare function state(name: string, styles: AnimationStyleMetadata, options?: { params: { [name: string]: any; }; }): AnimationStateMetadata; /** * Declares a key/value object containing CSS properties/styles that * can then be used for an animation [`state`](api/animations/state), within an animation *`sequence`, or as styling data for calls to `animate()` and `keyframes()`. * * @param tokens A set of CSS styles or HTML styles associated with an animation state. * The value can be any of the following: * - A key-value style pair associating a CSS property with a value. * - An array of key-value style pairs. * - An asterisk (*), to use auto-styling, where styles are derived from the element * being animated and applied to the animation when it starts. * * Auto-styling can be used to define a state that depends on layout or other * environmental factors. * * @return An object that encapsulates the style data. * * @usageNotes * The following examples create animation styles that collect a set of * CSS property values: * * ```typescript * // string values for CSS properties * style({ background: "red", color: "blue" }) * * // numerical pixel values * style({ width: 100, height: 0 }) * ``` * * The following example uses auto-styling to allow an element to animate from * a height of 0 up to its full height: * * ``` * style({ height: 0 }), * animate("1s", style({ height: "*" })) * ``` * * @publicApi **/ export declare function style(tokens: '*' | { [key: string]: string | number; } | Array<'*' | { [key: string]: string | number; }>): AnimationStyleMetadata; /** * Declares an animation transition which is played when a certain specified condition is met. * * @param stateChangeExpr A string with a specific format or a function that specifies when the * animation transition should occur (see [State Change Expression](#state-change-expression)). * * @param steps One or more animation objects that represent the animation's instructions. * * @param options An options object that can be used to specify a delay for the animation or provide * custom parameters for it. * * @returns An object that encapsulates the transition data. * * @usageNotes * * ### State Change Expression * * The State Change Expression instructs Angular when to run the transition's animations, it can *either be * - a string with a specific syntax * - or a function that compares the previous and current state (value of the expression bound to * the element's trigger) and returns `true` if the transition should occur or `false` otherwise * * The string format can be: * - `fromState => toState`, which indicates that the transition's animations should occur then the * expression bound to the trigger's element goes from `fromState` to `toState` * * _Example:_ * ```typescript * transition('open => closed', animate('.5s ease-out', style({ height: 0 }) )) * ``` * * - `fromState <=> toState`, which indicates that the transition's animations should occur then * the expression bound to the trigger's element goes from `fromState` to `toState` or vice versa * * _Example:_ * ```typescript * transition('enabled <=> disabled', animate('1s cubic-bezier(0.8,0.3,0,1)')) * ``` * * - `:enter`/`:leave`, which indicates that the transition's animations should occur when the * element enters or exists the DOM * * _Example:_ * ```typescript * transition(':enter', [ * style({ opacity: 0 }), * animate('500ms', style({ opacity: 1 })) * ]) * ``` * * - `:increment`/`:decrement`, which indicates that the transition's animations should occur when * the numerical expression bound to the trigger's element has increased in value or decreased * * _Example:_ * ```typescript * transition(':increment', query('@counter', animateChild())) * ``` * * - a sequence of any of the above divided by commas, which indicates that transition's animations * should occur whenever one of the state change expressions matches * * _Example:_ * ```typescript * transition(':increment, * => enabled, :enter', animate('1s ease', keyframes([ * style({ transform: 'scale(1)', offset: 0}), * style({ transform: 'scale(1.1)', offset: 0.7}), * style({ transform: 'scale(1)', offset: 1}) * ]))), * ``` * * Also note that in such context: * - `void` can be used to indicate the absence of the element * - asterisks can be used as wildcards that match any state * - (as a consequence of the above, `void => *` is equivalent to `:enter` and `* => void` is * equivalent to `:leave`) * - `true` and `false` also match expression values of `1` and `0` respectively (but do not match * _truthy_ and _falsy_ values) * *
* * Be careful about entering end leaving elements as their transitions present a common * pitfall for developers. * * Note that when an element with a trigger enters the DOM its `:enter` transition always * gets executed, but its `:leave` transition will not be executed if the element is removed * alongside its parent (as it will be removed "without warning" before its transition has * a chance to be executed, the only way that such transition can occur is if the element * is exiting the DOM on its own). * * *
* * ### Animating to a Final State * * If the final step in a transition is a call to `animate()` that uses a timing value * with no `style` data, that step is automatically considered the final animation arc, * for the element to reach the final state, in such case Angular automatically adds or removes * CSS styles to ensure that the element is in the correct final state. * * * ### Usage Examples * * - Transition animations applied based on * the trigger's expression value * * ```HTML *
* ... *
* ``` * * ```typescript * trigger("myAnimationTrigger", [ * ..., // states * transition("on => off, open => closed", animate(500)), * transition("* <=> error", query('.indicator', animateChild())) * ]) * ``` * * - Transition animations applied based on custom logic dependent * on the trigger's expression value and provided parameters * * ```HTML *
* ... *
* ``` * * ```typescript * trigger("myAnimationTrigger", [ * ..., // states * transition( * (fromState, toState, _element, params) => * ['firststep', 'laststep'].includes(fromState.toLowerCase()) * && toState === params?.['target'], * animate('1s') * ) * ]) * ``` * * @publicApi **/ export declare function transition(stateChangeExpr: string | ((fromState: string, toState: string, element?: any, params?: { [key: string]: any; }) => boolean), steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions | null): AnimationTransitionMetadata; /** * Creates a named animation trigger, containing a list of [`state()`](api/animations/state) * and `transition()` entries to be evaluated when the expression * bound to the trigger changes. * * @param name An identifying string. * @param definitions An animation definition object, containing an array of * [`state()`](api/animations/state) and `transition()` declarations. * * @return An object that encapsulates the trigger data. * * @usageNotes * Define an animation trigger in the `animations` section of `@Component` metadata. * In the template, reference the trigger by name and bind it to a trigger expression that * evaluates to a defined animation state, using the following format: * * `[@triggerName]="expression"` * * Animation trigger bindings convert all values to strings, and then match the * previous and current values against any linked transitions. * Booleans can be specified as `1` or `true` and `0` or `false`. * * ### Usage Example * * The following example creates an animation trigger reference based on the provided * name value. * The provided animation value is expected to be an array consisting of state and * transition declarations. * * ```typescript * @Component({ * selector: "my-component", * templateUrl: "my-component-tpl.html", * animations: [ * trigger("myAnimationTrigger", [ * state(...), * state(...), * transition(...), * transition(...) * ]) * ] * }) * class MyComponent { * myStatusExp = "something"; * } * ``` * * The template associated with this component makes use of the defined trigger * by binding to an element within its template code. * * ```html * *
...
* ``` * * ### Using an inline function * The `transition` animation method also supports reading an inline function which can decide * if its associated animation should be run. * * ```typescript * // this method is run each time the `myAnimationTrigger` trigger value changes. * function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key: string]: any}): boolean { * // notice that `element` and `params` are also available here * return toState == 'yes-please-animate'; * } * * @Component({ * selector: 'my-component', * templateUrl: 'my-component-tpl.html', * animations: [ * trigger('myAnimationTrigger', [ * transition(myInlineMatcherFn, [ * // the animation sequence code * ]), * ]) * ] * }) * class MyComponent { * myStatusExp = "yes-please-animate"; * } * ``` * * ### Disabling Animations * When true, the special animation control binding `@.disabled` binding prevents * all animations from rendering. * Place the `@.disabled` binding on an element to disable * animations on the element itself, as well as any inner animation triggers * within the element. * * The following example shows how to use this feature: * * ```typescript * @Component({ * selector: 'my-component', * template: ` *
*
*
* `, * animations: [ * trigger("childAnimation", [ * // ... * ]) * ] * }) * class MyComponent { * isDisabled = true; * exp = '...'; * } * ``` * * When `@.disabled` is true, it prevents the `@childAnimation` trigger from animating, * along with any inner animations. * * ### Disable animations application-wide * When an area of the template is set to have animations disabled, * **all** inner components have their animations disabled as well. * This means that you can disable all animations for an app * by placing a host binding set on `@.disabled` on the topmost Angular component. * * ```typescript * import {Component, HostBinding} from '@angular/core'; * * @Component({ * selector: 'app-component', * templateUrl: 'app.component.html', * }) * class AppComponent { * @HostBinding('@.disabled') * public animationsDisabled = true; * } * ``` * * ### Overriding disablement of inner animations * Despite inner animations being disabled, a parent animation can `query()` * for inner elements located in disabled areas of the template and still animate * them if needed. This is also the case for when a sub animation is * queried by a parent and then later animated using `animateChild()`. * * ### Detecting when an animation is disabled * If a region of the DOM (or the entire application) has its animations disabled, the animation * trigger callbacks still fire, but for zero seconds. When the callback fires, it provides * an instance of an `AnimationEvent`. If animations are disabled, * the `.disabled` flag on the event is true. * * @publicApi */ export declare function trigger(name: string, definitions: AnimationMetadata[]): AnimationTriggerMetadata; /** * Starts a reusable animation that is created using the `animation()` function. * * @param animation The reusable animation to start. * @param options An options object that can contain a delay value for the start of * the animation, and additional override values for developer-defined parameters. * @return An object that contains the animation parameters. * * @publicApi */ export declare function useAnimation(animation: AnimationReferenceMetadata, options?: AnimationOptions | null): AnimationAnimateRefMetadata; /** * A programmatic controller for a group of reusable animations. * Used internally to control animations. * * @see {@link AnimationPlayer} * @see {@link animations/group group} * */ export declare class ɵAnimationGroupPlayer implements AnimationPlayer { private _onDoneFns; private _onStartFns; private _finished; private _started; private _destroyed; private _onDestroyFns; parentPlayer: AnimationPlayer | null; totalTime: number; readonly players: AnimationPlayer[]; constructor(_players: AnimationPlayer[]); private _onFinish; init(): void; onStart(fn: () => void): void; private _onStart; onDone(fn: () => void): void; onDestroy(fn: () => void): void; hasStarted(): boolean; play(): void; pause(): void; restart(): void; finish(): void; destroy(): void; private _onDestroy; reset(): void; setPosition(p: number): void; getPosition(): number; beforeDestroy(): void; } export declare class ɵBrowserAnimationBuilder extends AnimationBuilder { private animationModuleType; private _nextAnimationId; private _renderer; constructor(rootRenderer: RendererFactory2, doc: Document); build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory; static ɵfac: i0.ɵɵFactoryDeclaration<ɵBrowserAnimationBuilder, never>; static ɵprov: i0.ɵɵInjectableDeclaration<ɵBrowserAnimationBuilder>; } export declare const ɵPRE_STYLE = "!"; /** * The list of error codes used in runtime code of the `animations` package. * Reserved error code range: 3000-3999. */ export declare const enum ɵRuntimeErrorCode { INVALID_TIMING_VALUE = 3000, INVALID_STYLE_PARAMS = 3001, INVALID_STYLE_VALUE = 3002, INVALID_PARAM_VALUE = 3003, INVALID_NODE_TYPE = 3004, INVALID_CSS_UNIT_VALUE = 3005, INVALID_TRIGGER = 3006, INVALID_DEFINITION = 3007, INVALID_STATE = 3008, INVALID_PROPERTY = 3009, INVALID_PARALLEL_ANIMATION = 3010, INVALID_KEYFRAMES = 3011, INVALID_OFFSET = 3012, INVALID_STAGGER = 3013, INVALID_QUERY = 3014, INVALID_EXPRESSION = 3015, INVALID_TRANSITION_ALIAS = 3016, NEGATIVE_STEP_VALUE = 3100, NEGATIVE_DELAY_VALUE = 3101, KEYFRAME_OFFSETS_OUT_OF_ORDER = 3200, KEYFRAMES_MISSING_OFFSETS = 3202, MISSING_OR_DESTROYED_ANIMATION = 3300, MISSING_PLAYER = 3301, MISSING_TRIGGER = 3302, MISSING_EVENT = 3303, UNSUPPORTED_TRIGGER_EVENT = 3400, UNREGISTERED_TRIGGER = 3401, TRIGGER_TRANSITIONS_FAILED = 3402, TRIGGER_PARSING_FAILED = 3403, TRIGGER_BUILD_FAILED = 3404, VALIDATION_FAILED = 3500, BUILDING_FAILED = 3501, ANIMATION_FAILED = 3502, REGISTRATION_FAILED = 3503, CREATE_ANIMATION_FAILED = 3504, TRANSITION_FAILED = 3505, BROWSER_ANIMATION_BUILDER_INJECTED_WITHOUT_ANIMATIONS = 3600 } /** * Represents a set of CSS styles for use in an animation style as a generic. */ export declare interface ɵStyleData { [key: string]: string | number; } /** * Represents a set of CSS styles for use in an animation style as a Map. */ export declare type ɵStyleDataMap = Map; export { }