/** | |
* @license Angular v8.1.1 | |
* (c) 2010-2019 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 | |
*/ | |
export declare interface AnimationEvent { | |
/** | |
* 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; | |
} | |
/** | |
* 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; | |
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: ` | |
* <div [@queryAnimation]="exp"> | |
* <h1>Title</h1> | |
* <div class="content"> | |
* Blah blah blah | |
* </div> | |
* </div> | |
* `, | |
* 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 | |
* <!-- list.component.html --> | |
* <button (click)="toggle()">Show / Hide Items</button> | |
* <hr /> | |
* <div [@listAnimation]="items.length"> | |
* <div *ngFor="let item of items"> | |
* {{ item }} | |
* </div> | |
* </div> | |
* ``` | |
* | |
* 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 | |
* <!-- somewhere inside of my-component-tpl.html --> | |
* <div [@myAnimationTrigger]="myStatusExp">...</div> | |
* ``` | |
* | |
* 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 | |
* <div [@openClose]="open ? true : false">...</div> | |
* // 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 | |
* <!-- somewhere inside of my-component-tpl.html --> | |
* <div [@myAnimationTrigger]="myStatusExp">...</div> | |
* ``` | |
* | |
* ### 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: ` | |
* <div [@.disabled]="isDisabled"> | |
* <div [@childAnimation]="exp"></div> | |
* </div> | |
* `, | |
* 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 { } |