{ "id": "api/animations", "title": "@angular/animations", "contents": "\n\n
\n
\n
\n \n API\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

@angular/animationslink

\n \n \n \n \n
\n\n \n\n
\n

Implements a domain-specific language (DSL) for defining web animation sequences for HTML elements as\nmultiple transformations over time.

\n\n

Use this API to define how an HTML element can move, change color, grow or shrink, fade, or slide off\nthe page. These changes can occur simultaneously or sequentially. You can control the timing of each\nof these transformations. The function calls generate the data structures and metadata that enable Angular\nto integrate animations into templates and run them based on application states.

\n

Animation definitions are linked to components through the animations\nproperty in the @Component metadata, typically in the component file of the HTML element to be animated.\nThe trigger() function encapsulates a named animation, with all other function calls nested within. Use\nthe trigger name to bind the named animation to a specific triggering element in the HTML template.

\n

Angular animations are based on CSS web transition functionality, so anything that can be styled or\ntransformed in CSS can be animated the same way in Angular. Angular animations allow you to:

\n\n

Additional animation functionality is provided in other Angular modules for animation testing, for\nroute-based animations, and for programmatic animation controls that allow an end user to fast forward\nand reverse an animation sequence.

\n\n\n \n
\n

See alsolink

\n \n
\n\n\n\n \n

Entry pointslink

\n \n \n \n
\n

Primarylink

\n \n \n \n \n \n \n \n
@angular/animations\n \n

Implements a domain-specific language (DSL) for defining web animation sequences for HTML elements as\nmultiple transformations over time.

\n\n
\n
\n \n\n \n \n \n
\n

Secondarylink

\n \n \n \n \n \n \n \n \n \n \n \n \n
@angular/animations/browser\n \n

Provides infrastructure for cross-platform rendering of animations in a browser.

\n\n
@angular/animations/browser/testing\n \n

Provides infrastructure for testing of the Animations browser subsystem.

\n\n
\n
\n \n\n \n\n

Primary entry point exportslink

\n \n \n \n \n \n\n \n \n \n
\n

Classeslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
AnimationBuilder\n \n

An injectable service that produces an animation sequence programmatically within an\nAngular component or directive.\nProvided by the BrowserAnimationsModule or NoopAnimationsModule.

\n\n
AnimationFactory\n \n

A factory object returned from the AnimationBuilder.build() method.

\n\n
NoopAnimationPlayer\n \n

An empty programmatic controller for reusable animations.\nUsed internally when animations are disabled, to avoid\nchecking for the null case when an animation player is expected.

\n\n
\n
\n \n\n \n \n \n\n \n \n \n
\n

Functionslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
animate\n \n

Defines an animation step that combines styling information with timing information.

\n\n
animateChild\n \n

Executes a queried inner animation element within an animation sequence.

\n\n
animation\n \n

Produces a reusable animation that can be invoked in another animation or sequence,\nby calling the useAnimation() function.

\n\n
group\n \n

Defines a list of animation steps to be run in parallel.

\n\n
keyframes\n \n

Defines a set of animation styles, associating each style with an optional offset value.

\n\n
query\n \n

Finds one or more inner elements within the current element that is\nbeing animated within a sequence. Use with animate().

\n\n
sequence\n \n

Defines a list of animation steps to be run sequentially, one by one.

\n\n
stagger\n \n

Use within an animation query() call to issue a timing gap after\neach queried item is animated.

\n\n
state\n \n

Declares an animation state within a trigger attached to an element.

\n\n
style\n \n

Declares a key/value object containing CSS properties/styles that\ncan then be used for an animation state, within an animation sequence,\nor as styling data for calls to animate() and keyframes().

\n\n
transition\n \n

Declares an animation transition as a sequence of animation steps to run when a given\ncondition is satisfied. The condition is a Boolean expression or function that compares\nthe previous and current animation states, and returns true if this transition should occur.\nWhen the state criteria of a defined transition are met, the associated animation is\ntriggered.

\n\n
trigger\n \n

Creates a named animation trigger, containing a list of state()\nand transition() entries to be evaluated when the expression\nbound to the trigger changes.

\n\n
useAnimation\n \n

Starts a reusable animation that is created using the animation() function.

\n\n
\n
\n \n\n \n \n \n
\n

Structureslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
AnimateChildOptions\n \n

Adds duration options to control animation styling and timing for a child animation.

\n\n
AnimationAnimateChildMetadata\n \n

Encapsulates a child animation, that can be run explicitly when the parent is run.\nInstantiated and returned by the animateChild function.

\n\n
AnimationAnimateMetadata\n \n

Encapsulates an animation step. Instantiated and returned by\nthe animate() function.

\n\n
AnimationAnimateRefMetadata\n \n

Encapsulates a reusable animation.\nInstantiated and returned by the useAnimation() function.

\n\n
AnimationEvent\n \n

An instance of this class is returned as an event parameter when an animation\ncallback is captured for an animation either during the start or done phase.

\n\n
AnimationGroupMetadata\n \n

Encapsulates an animation group.\nInstantiated and returned by the group() function.

\n\n
AnimationKeyframesSequenceMetadata\n \n

Encapsulates a keyframes sequence. Instantiated and returned by\nthe keyframes() function.

\n\n
AnimationMetadata\n \n

Base for animation data structures.

\n\n
AnimationMetadataType\n \n

Constants for the categories of parameters that can be defined for animations.

\n\n
AnimationOptions\n \n

Options that control animation styling and timing.

\n\n
AnimationPlayer\n \n

Provides programmatic control of a reusable animation sequence,\nbuilt using the build() method of AnimationBuilder. The build() method\nreturns a factory, whose create() method instantiates and initializes this interface.

\n\n
AnimationQueryMetadata\n \n

Encapsulates an animation query. Instantiated and returned by\nthe query() function.

\n\n
AnimationQueryOptions\n \n

Encapsulates animation query options.\nPassed to the query() function.

\n\n
AnimationReferenceMetadata\n \n

Encapsulates a reusable animation, which is a collection of individual animation steps.\nInstantiated and returned by the animation() function, and\npassed to the useAnimation() function.

\n\n
AnimationSequenceMetadata\n \n

Encapsulates an animation sequence.\nInstantiated and returned by the sequence() function.

\n\n
AnimationStaggerMetadata\n \n

Encapsulates parameters for staggering the start times of a set of animation steps.\nInstantiated and returned by the stagger() function.

\n\n
AnimationStateMetadata\n \n

Encapsulates an animation state by associating a state name with a set of CSS styles.\nInstantiated and returned by the state() function.

\n\n
AnimationStyleMetadata\n \n

Encapsulates an animation style. Instantiated and returned by\nthe style() function.

\n\n
AnimationTransitionMetadata\n \n

Encapsulates an animation transition. Instantiated and returned by the\ntransition() function.

\n\n
AnimationTriggerMetadata\n \n

Contains an animation trigger. Instantiated and returned by the\ntrigger() function.

\n\n
\n
\n \n\n \n \n \n\n \n \n \n\n \n \n \n
\n

Typeslink

\n \n \n \n \n \n \n \n \n \n \n \n \n
AUTO_STYLE\n \n

Specifies automatic styling.

\n\n
AnimateTimings\n \n

Represents animation-step timing parameters for an animation step.

\n\n
\n
\n \n\n
\n
\n\n\n" }