/** * @license Angular v12.2.9 * (c) 2010-2021 Google LLC. https://angular.io/ * License: MIT */ /** * 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 `animateChild()` * * @publicApi */ export declare interface AnimateChildOptions extends AnimationOptions { duration?: number | string; } /** * Represents animation-step timing parameters for an animation step. * @see `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 `build()` method to create a programmatic animation using the * `animate()` function. 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 `animate()` */ abstract build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory; } /** * 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()` method. * * @publicApi */ export declare abstract class AnimationFactory { /** * Creates an `AnimationPlayer` instance for the reusable animation defined by * the `AnimationBuilder`.`build()` method that created this factory. * Attaches the new player a DOM element. * @param element The DOM element to which to attach the animation. * @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 const enum AnimationMetadataType { /** * Associates a named animation state with a set of CSS styles. * See `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 `build()` method of `AnimationBuilder`. The `build()` method * returns a factory, whose `create()` method instantiates and initializes this interface. * * @see `AnimationBuilder` * @see `AnimationFactory` * @see `animate()` * * @publicApi */ export declare interface AnimationPlayer { /** * Provides a callback to invoke when the animation finishes. * @param fn The callback function. * @see `finish()` */ onDone(fn: () => void): void; /** * Provides a callback to invoke when the animation starts. * @param fn The callback function. * @see `run()` */ onStart(fn: () => void): void; /** * Provides a callback to invoke after the animation is destroyed. * @param fn The callback function. * @see `destroy()` * @see `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: any /** TODO #9100 */): 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()` 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 `animate()` * @see `AnimationPlayer` * @see `GroupPlayer` * * @publicApi */ export declare class NoopAnimationPlayer implements AnimationPlayer { private _onDoneFns; private _onStartFns; private _onDestroyFns; 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. * - `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 * 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 }) * ``` * * ### 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`, 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 a component to animate from * a height of 0 up to the height of the parent element: * * ``` * 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 as a sequence of animation steps to run when a given * condition is satisfied. The condition is a Boolean expression or function that compares * the previous and current animation states, and returns true if this transition should occur. * When the state criteria of a defined transition are met, the associated animation is * triggered. * * @param stateChangeExpr A Boolean expression or function that compares the previous and current * animation states, and returns true if this transition should occur. Note that "true" and "false" * match 1 and 0, respectively. An expression is evaluated each time a state change occurs in the * animation trigger element. * The animation steps run when the expression evaluates to true. * * - A state-change string takes the form "state1 => state2", where each side is a defined animation * state, or an asterix (*) to refer to a dynamic start or end state. * - The expression string can contain multiple comma-separated statements; * for example "state1 => state2, state3 => state4". * - Special values `:enter` and `:leave` initiate a transition on the entry and exit states, * equivalent to "void => *" and "* => void". * - Special values `:increment` and `:decrement` initiate a transition when a numeric value has * increased or decreased in value. * - A function is executed each time a state change occurs in the animation trigger element. * The animation steps run when the function returns true. * * @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 transition data. * * @usageNotes * The template associated with a component binds an animation trigger to an element. * * ```HTML * *
...
* ``` * * All transitions are defined within an animation trigger, * along with named states that the transitions change to and from. * * ```typescript * trigger("myAnimationTrigger", [ * // define states * state("on", style({ background: "green" })), * state("off", style({ background: "grey" })), * ...] * ``` * * Note that when you call the `sequence()` function within a `{@link animations/group group()}` * or a `transition()` call, execution does not continue to the next instruction * until each of the inner animation steps have completed. * * ### Syntax examples * * The following examples define transitions between the two defined states (and default states), * using various options: * * ```typescript * // Transition occurs when the state value * // bound to "myAnimationTrigger" changes from "on" to "off" * transition("on => off", animate(500)) * // Run the same animation for both directions * transition("on <=> off", animate(500)) * // Define multiple state-change pairs separated by commas * transition("on => off, off => void", animate(500)) * ``` * * ### Special values for state-change expressions * * - Catch-all state change for when an element is inserted into the page and the * destination state is unknown: * * ```typescript * transition("void => *", [ * style({ opacity: 0 }), * animate(500) * ]) * ``` * * - Capture a state change between any states: * * `transition("* => *", animate("1s 0s"))` * * - Entry and exit transitions: * * ```typescript * transition(":enter", [ * style({ opacity: 0 }), * animate(500, style({ opacity: 1 })) * ]), * transition(":leave", [ * animate(500, style({ opacity: 0 })) * ]) * ``` * * - Use `:increment` and `:decrement` to initiate transitions: * * ```typescript * transition(":increment", group([ * query(':enter', [ * style({ left: '100%' }), * animate('0.5s ease-out', style('*')) * ]), * query(':leave', [ * animate('0.5s ease-out', style({ left: '-100%' })) * ]) * ])) * * transition(":decrement", group([ * query(':enter', [ * style({ left: '100%' }), * animate('0.5s ease-out', style('*')) * ]), * query(':leave', [ * animate('0.5s ease-out', style({ left: '-100%' })) * ]) * ])) * ``` * * ### State-change functions * * Here is an example of a `fromState` specified as a state-change function that invokes an * animation when true: * * ```typescript * transition((fromState, toState) => * { * return fromState == "off" && toState == "on"; * }, * animate("1s 0s")) * ``` * * ### Animating to the 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. Angular automatically adds or removes * CSS styles to ensure that the element is in the correct final state. * * The following example defines a transition that starts by hiding the element, * then makes sure that it animates properly to whatever state is currently active for trigger: * * ```typescript * transition("void => *", [ * style({ opacity: 0 }), * animate(500) * ]) * ``` * ### Boolean value matching * If a trigger binding value is a Boolean, it can be matched using a transition expression * that compares true and false or 1 and 0. For example: * * ``` * // in the template *
...
* // in the component metadata * trigger('openClose', [ * state('true', style({ height: '*' })), * state('false', style({ height: '0px' })), * transition('false <=> true', animate(500)) * ]) * ``` * * @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()` * 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()` * 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 `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 const ɵPRE_STYLE = "!"; /** * Represents a set of CSS styles for use in an animation style. */ export declare interface ɵStyleData { [key: string]: string | number; } export { } //# sourceMappingURL=animations.d.ts.map