@angular/animations

  • Version 12.0.3
  • Published
  • 2.42 MB
  • 1 dependency
  • MIT license

Install

npm i @angular/animations
yarn add @angular/animations
pnpm add @angular/animations

Overview

Angular - animations integration with web-animations

Index

Variables

Functions

Classes

Interfaces

Enums

Type Aliases

Variables

variable AUTO_STYLE

const AUTO_STYLE: string;
  • Specifies automatic styling.

variable ɵPRE_STYLE

const ɵPRE_STYLE: string;

    Functions

    function animate

    animate: (
    timings: string | number,
    styles?: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null
    ) => AnimationAnimateMetadata;
    • Defines an animation step that combines styling information with timing information.

      Parameter 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.

      Parameter 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.

      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.

      animate(500, style({ background: "red" }))

      The following example calls keyframes() to set a CSS style to different values for successive keyframes.

      animate(500, keyframes(
      [
      style({ background: "blue" }),
      style({ background: "red" })
      ])

    function animateChild

    animateChild: (
    options?: AnimateChildOptions | null
    ) => AnimationAnimateChildMetadata;
    • Executes a queried inner animation element within an animation sequence.

      Parameter options

      An options object that can contain a delay value for the start of the animation, and additional override values for developer-defined parameters. An object that encapsulates the child animation data.

      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.

    function animation

    animation: (
    steps: AnimationMetadata | AnimationMetadata[],
    options?: AnimationOptions | null
    ) => AnimationReferenceMetadata;
    • Produces a reusable animation that can be invoked in another animation or sequence, by calling the useAnimation() function.

      Parameter 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.

      Parameter 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.

      The following example defines a reusable animation, providing some default parameter values.

      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.

      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.

    function group

    group: (
    steps: AnimationMetadata[],
    options?: AnimationOptions | null
    ) => AnimationGroupMetadata;
    • Defines a list of animation steps to be run in parallel.

      Parameter 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:

      group([
      animate("1s", style({ background: "black" })),
      animate("2s", style({ color: "white" }))
      ])

      Parameter options

      An options object containing a delay and developer-defined parameters that provide styling defaults and can be overridden on invocation.

      An object that encapsulates the group data.

      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.

    function keyframes

    keyframes: (
    steps: AnimationStyleMetadata[]
    ) => AnimationKeyframesSequenceMetadata;
    • Defines a set of animation styles, associating each style with an optional offset value.

      Parameter 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.

      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.

      // 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.

      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
      ]))

    function query

    query: (
    selector: string,
    animation: AnimationMetadata | AnimationMetadata[],
    options?: AnimationQueryOptions | null
    ) => AnimationQueryMetadata;
    • Finds one or more inner elements within the current element that is being animated within a sequence. Use with animate().

      Parameter 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.

      Parameter animation

      One or more animation steps to apply to the queried element or elements. An array is treated as an animation sequence.

      Parameter options

      An options object. Use the 'limit' field to limit the total number of items to collect. An object that encapsulates the query data.

      Tokens can be merged into a combined query selector string. For example:

      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:

      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:

      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().

      @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';
      }
      }

    function sequence

    sequence: (
    steps: AnimationMetadata[],
    options?: AnimationOptions | null
    ) => AnimationSequenceMetadata;
    • Defines a list of animation steps to be run sequentially, one by one.

      Parameter 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.

      sequence([
      style({ opacity: 0 }),
      animate("1s", style({ opacity: 1 }))
      ])

      Parameter options

      An options object containing a delay and developer-defined parameters that provide styling defaults and can be overridden on invocation.

      An object that encapsulates the sequence data.

      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.

    function stagger

    stagger: (
    timings: string | number,
    animation: AnimationMetadata | AnimationMetadata[]
    ) => AnimationStaggerMetadata;
    • Use within an animation query() call to issue a timing gap after each queried item is animated.

      Parameter timings

      A delay value.

      Parameter animation

      One ore more animation steps.

      Returns

      An object that encapsulates the stagger data.

      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.

      <!-- 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:

      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:

      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 }))
      ])
      ])
      ])
      ])

    function state

    state: (
    name: string,
    styles: AnimationStyleMetadata,
    options?: { params: { [name: string]: any } }
    ) => AnimationStateMetadata;
    • Declares an animation state within a trigger attached to an element.

      Parameter 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.

      Parameter 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.

      Parameter options

      Parameters that can be passed to the state when it is invoked. 0 or more key-value pairs. An object that encapsulates the new state data.

      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.

    function style

    style: (
    tokens:
    | '*'
    | { [key: string]: string | number }
    | ('*' | { [key: string]: string | number })[]
    ) => AnimationStyleMetadata;
    • 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().

      Parameter 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.

      An object that encapsulates the style data.

      The following examples create animation styles that collect a set of CSS property values:

      // 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: "*" }))

    function transition

    transition: (
    stateChangeExpr:
    | string
    | ((
    fromState: string,
    toState: string,
    element?: any,
    params?: { [key: string]: any }
    ) => boolean),
    steps: AnimationMetadata | AnimationMetadata[],
    options?: AnimationOptions | null
    ) => AnimationTransitionMetadata;
    • 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.

      Parameter 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.

      Parameter 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.

      Parameter 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.

      The template associated with a component binds an animation trigger to an element.

      <!-- 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.

      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:

      // 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:

      transition("void => *", [
      style({ opacity: 0 }),
      animate(500)
      ])

      - Capture a state change between any states:

      transition("* => *", animate("1s 0s"))

      - Entry and exit transitions:

      transition(":enter", [
      style({ opacity: 0 }),
      animate(500, style({ opacity: 1 }))
      ]),
      transition(":leave", [
      animate(500, style({ opacity: 0 }))
      ])

      - Use :increment and :decrement to initiate transitions:

      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:

      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:

      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))
      ])

    function trigger

    trigger: (
    name: string,
    definitions: AnimationMetadata[]
    ) => AnimationTriggerMetadata;
    • Creates a named animation trigger, containing a list of state() and transition() entries to be evaluated when the expression bound to the trigger changes.

      Parameter name

      An identifying string.

      Parameter definitions

      An animation definition object, containing an array of state() and transition() declarations.

      An object that encapsulates the trigger data.

      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.

      @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.

      <!-- 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.

      // 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:

      @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.

      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.

    function useAnimation

    useAnimation: (
    animation: AnimationReferenceMetadata,
    options?: AnimationOptions | null
    ) => AnimationAnimateRefMetadata;
    • Starts a reusable animation that is created using the animation() function.

      Parameter animation

      The reusable animation to start.

      Parameter options

      An options object that can contain a delay value for the start of the animation, and additional override values for developer-defined parameters. An object that contains the animation parameters.

    Classes

    class AnimationBuilder

    abstract class AnimationBuilder {}
    • An injectable service that produces an animation sequence programmatically within an Angular component or directive. Provided by the BrowserAnimationsModule or NoopAnimationsModule.

      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:

      // 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();
      }
      }

    method build

    abstract build: (
    animation: AnimationMetadata | AnimationMetadata[]
    ) => AnimationFactory;
    • Builds a factory for producing a defined animation.

      Parameter animation

      A reusable animation definition.

      Returns

      A factory object that can create a player for the defined animation.

      See Also

      • animate()

    class AnimationFactory

    abstract class AnimationFactory {}
    • A factory object returned from the AnimationBuilder.build() method.

    method create

    abstract create: (element: any, options?: AnimationOptions) => AnimationPlayer;
    • 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.

      Parameter element

      The DOM element to which to attach the animation.

      Parameter options

      A set of options that can include a time delay and additional developer-defined parameters.

    class NoopAnimationPlayer

    class NoopAnimationPlayer implements AnimationPlayer {}
    • 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 Also

      • animate()

      • AnimationPlayer

      • GroupPlayer

    constructor

    constructor(duration?: number, delay?: number);

      property parentPlayer

      parentPlayer: AnimationPlayer;

        property totalTime

        readonly totalTime: number;

          method destroy

          destroy: () => void;

            method finish

            finish: () => void;

              method getPosition

              getPosition: () => number;

                method hasStarted

                hasStarted: () => boolean;

                  method init

                  init: () => void;

                    method onDestroy

                    onDestroy: (fn: () => void) => void;

                      method onDone

                      onDone: (fn: () => void) => void;

                        method onStart

                        onStart: (fn: () => void) => void;

                          method pause

                          pause: () => void;

                            method play

                            play: () => void;

                              method reset

                              reset: () => void;

                                method restart

                                restart: () => void;

                                  method setPosition

                                  setPosition: (position: number) => void;

                                    class ɵAnimationGroupPlayer

                                    class ɵAnimationGroupPlayer implements AnimationPlayer {}
                                    • A programmatic controller for a group of reusable animations. Used internally to control animations.

                                      See Also

                                      • AnimationPlayer

                                      • {@link animations/group group()}

                                    constructor

                                    constructor(_players: AnimationPlayer[]);

                                      property parentPlayer

                                      parentPlayer: AnimationPlayer;

                                        property players

                                        readonly players: AnimationPlayer[];

                                          property totalTime

                                          totalTime: number;

                                            method beforeDestroy

                                            beforeDestroy: () => void;

                                              method destroy

                                              destroy: () => void;

                                                method finish

                                                finish: () => void;

                                                  method getPosition

                                                  getPosition: () => number;

                                                    method hasStarted

                                                    hasStarted: () => boolean;

                                                      method init

                                                      init: () => void;

                                                        method onDestroy

                                                        onDestroy: (fn: () => void) => void;

                                                          method onDone

                                                          onDone: (fn: () => void) => void;

                                                            method onStart

                                                            onStart: (fn: () => void) => void;

                                                              method pause

                                                              pause: () => void;

                                                                method play

                                                                play: () => void;

                                                                  method reset

                                                                  reset: () => void;

                                                                    method restart

                                                                    restart: () => void;

                                                                      method setPosition

                                                                      setPosition: (p: number) => void;

                                                                        Interfaces

                                                                        interface AnimateChildOptions

                                                                        interface AnimateChildOptions extends AnimationOptions {}
                                                                        • Adds duration options to control animation styling and timing for a child animation.

                                                                          See Also

                                                                          • animateChild()

                                                                        property duration

                                                                        duration?: number | string;

                                                                          interface AnimationAnimateChildMetadata

                                                                          interface AnimationAnimateChildMetadata extends AnimationMetadata {}
                                                                          • Encapsulates a child animation, that can be run explicitly when the parent is run. Instantiated and returned by the animateChild function.

                                                                          property options

                                                                          options: AnimationOptions | null;
                                                                          • An options object containing a delay and developer-defined parameters that provide styling defaults and can be overridden on invocation. Default delay is 0.

                                                                          interface AnimationAnimateMetadata

                                                                          interface AnimationAnimateMetadata extends AnimationMetadata {}
                                                                          • Encapsulates an animation step. Instantiated and returned by the animate() function.

                                                                          property styles

                                                                          styles: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null;
                                                                          • A set of styles used in the step.

                                                                          property timings

                                                                          timings: string | number | AnimateTimings;
                                                                          • The timing data for the step.

                                                                          interface AnimationAnimateRefMetadata

                                                                          interface AnimationAnimateRefMetadata extends AnimationMetadata {}
                                                                          • Encapsulates a reusable animation. Instantiated and returned by the useAnimation() function.

                                                                          property animation

                                                                          animation: AnimationReferenceMetadata;
                                                                          • An animation reference object.

                                                                          property options

                                                                          options: AnimationOptions | null;
                                                                          • An options object containing a delay and developer-defined parameters that provide styling defaults and can be overridden on invocation. Default delay is 0.

                                                                          interface AnimationEvent

                                                                          interface AnimationEvent {}
                                                                          • 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.

                                                                            @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
                                                                            }
                                                                            }

                                                                          property disabled

                                                                          disabled: boolean;
                                                                          • Internal.

                                                                          property element

                                                                          element: any;
                                                                          • The element to which the animation is attached.

                                                                          property fromState

                                                                          fromState: string;
                                                                          • The name of the state from which the animation is triggered.

                                                                          property phaseName

                                                                          phaseName: string;
                                                                          • The animation phase in which the callback was invoked, one of "start" or "done".

                                                                          property toState

                                                                          toState: string;
                                                                          • The name of the state in which the animation completes.

                                                                          property totalTime

                                                                          totalTime: number;
                                                                          • The time it takes the animation to complete, in milliseconds.

                                                                          property triggerName

                                                                          triggerName: string;
                                                                          • Internal.

                                                                          interface AnimationGroupMetadata

                                                                          interface AnimationGroupMetadata extends AnimationMetadata {}
                                                                          • Encapsulates an animation group. Instantiated and returned by the {@link animations/group group()} function.

                                                                          property options

                                                                          options: AnimationOptions | null;
                                                                          • An options object containing a delay and developer-defined parameters that provide styling defaults and can be overridden on invocation. Default delay is 0.

                                                                          property steps

                                                                          steps: AnimationMetadata[];
                                                                          • One or more animation or style steps that form this group.

                                                                          interface AnimationKeyframesSequenceMetadata

                                                                          interface AnimationKeyframesSequenceMetadata extends AnimationMetadata {}
                                                                          • Encapsulates a keyframes sequence. Instantiated and returned by the keyframes() function.

                                                                          property steps

                                                                          steps: AnimationStyleMetadata[];
                                                                          • An array of animation styles.

                                                                          interface AnimationMetadata

                                                                          interface AnimationMetadata {}
                                                                          • Base for animation data structures.

                                                                          property type

                                                                          type: AnimationMetadataType;

                                                                            interface AnimationOptions

                                                                            interface AnimationOptions {}
                                                                            • 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.

                                                                            property delay

                                                                            delay?: number | string;
                                                                            • 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.

                                                                            property params

                                                                            params?: {
                                                                            [name: string]: any;
                                                                            };
                                                                            • 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.

                                                                            interface AnimationPlayer

                                                                            interface AnimationPlayer {}
                                                                            • 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 Also

                                                                              • AnimationBuilder

                                                                              • AnimationFactory

                                                                              • animate()

                                                                            property beforeDestroy

                                                                            beforeDestroy?: () => any;
                                                                            • Provides a callback to invoke before the animation is destroyed.

                                                                            property parentPlayer

                                                                            parentPlayer: AnimationPlayer | null;
                                                                            • The parent of this player, if any.

                                                                            property totalTime

                                                                            readonly totalTime: number;
                                                                            • The total run time of the animation, in milliseconds.

                                                                            method destroy

                                                                            destroy: () => void;
                                                                            • Destroys the animation, after invoking the beforeDestroy() callback. Calls the onDestroy() callback when destruction is completed.

                                                                            method finish

                                                                            finish: () => void;
                                                                            • Ends the animation, invoking the onDone() callback.

                                                                            method getPosition

                                                                            getPosition: () => number;
                                                                            • Reports the current position of the animation.

                                                                              Returns

                                                                              A 0-based offset into the duration, in milliseconds.

                                                                            method hasStarted

                                                                            hasStarted: () => boolean;
                                                                            • Reports whether the animation has started.

                                                                              Returns

                                                                              True if the animation has started, false otherwise.

                                                                            method init

                                                                            init: () => void;
                                                                            • Initializes the animation.

                                                                            method onDestroy

                                                                            onDestroy: (fn: () => void) => void;
                                                                            • Provides a callback to invoke after the animation is destroyed.

                                                                              Parameter fn

                                                                              The callback function.

                                                                              See Also

                                                                              • destroy()

                                                                              • beforeDestroy()

                                                                            method onDone

                                                                            onDone: (fn: () => void) => void;
                                                                            • Provides a callback to invoke when the animation finishes.

                                                                              Parameter fn

                                                                              The callback function.

                                                                              See Also

                                                                              • finish()

                                                                            method onStart

                                                                            onStart: (fn: () => void) => void;
                                                                            • Provides a callback to invoke when the animation starts.

                                                                              Parameter fn

                                                                              The callback function.

                                                                              See Also

                                                                              • run()

                                                                            method pause

                                                                            pause: () => void;
                                                                            • Pauses the animation.

                                                                            method play

                                                                            play: () => void;
                                                                            • Runs the animation, invoking the onStart() callback.

                                                                            method reset

                                                                            reset: () => void;
                                                                            • Resets the animation to its initial state.

                                                                            method restart

                                                                            restart: () => void;
                                                                            • Restarts the paused animation.

                                                                            method setPosition

                                                                            setPosition: (position: any) => void;
                                                                            • Sets the position of the animation.

                                                                              Parameter position

                                                                              A 0-based offset into the duration, in milliseconds.

                                                                            interface AnimationQueryMetadata

                                                                            interface AnimationQueryMetadata extends AnimationMetadata {}
                                                                            • Encapsulates an animation query. Instantiated and returned by the query() function.

                                                                            property animation

                                                                            animation: AnimationMetadata | AnimationMetadata[];
                                                                            • One or more animation step objects.

                                                                            property options

                                                                            options: AnimationQueryOptions | null;
                                                                            • A query options object.

                                                                            property selector

                                                                            selector: string;
                                                                            • The CSS selector for this query.

                                                                            interface AnimationQueryOptions

                                                                            interface AnimationQueryOptions extends AnimationOptions {}
                                                                            • Encapsulates animation query options. Passed to the query() function.

                                                                            property limit

                                                                            limit?: number;
                                                                            • 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.

                                                                            property optional

                                                                            optional?: boolean;
                                                                            • 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.

                                                                            interface AnimationReferenceMetadata

                                                                            interface AnimationReferenceMetadata extends AnimationMetadata {}
                                                                            • 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.

                                                                            property animation

                                                                            animation: AnimationMetadata | AnimationMetadata[];
                                                                            • One or more animation step objects.

                                                                            property options

                                                                            options: AnimationOptions | null;
                                                                            • An options object containing a delay and developer-defined parameters that provide styling defaults and can be overridden on invocation. Default delay is 0.

                                                                            interface AnimationSequenceMetadata

                                                                            interface AnimationSequenceMetadata extends AnimationMetadata {}
                                                                            • Encapsulates an animation sequence. Instantiated and returned by the sequence() function.

                                                                            property options

                                                                            options: AnimationOptions | null;
                                                                            • An options object containing a delay and developer-defined parameters that provide styling defaults and can be overridden on invocation. Default delay is 0.

                                                                            property steps

                                                                            steps: AnimationMetadata[];
                                                                            • An array of animation step objects.

                                                                            interface AnimationStaggerMetadata

                                                                            interface AnimationStaggerMetadata extends AnimationMetadata {}
                                                                            • Encapsulates parameters for staggering the start times of a set of animation steps. Instantiated and returned by the stagger() function.

                                                                            property animation

                                                                            animation: AnimationMetadata | AnimationMetadata[];
                                                                            • One or more animation steps.

                                                                            property timings

                                                                            timings: string | number;
                                                                            • The timing data for the steps.

                                                                            interface AnimationStateMetadata

                                                                            interface AnimationStateMetadata extends AnimationMetadata {}
                                                                            • Encapsulates an animation state by associating a state name with a set of CSS styles. Instantiated and returned by the state() function.

                                                                            property name

                                                                            name: string;
                                                                            • The state name, unique within the component.

                                                                            property options

                                                                            options?: {
                                                                            params: {
                                                                            [name: string]: any;
                                                                            };
                                                                            };
                                                                            • An options object containing developer-defined parameters that provide styling defaults and can be overridden on invocation.

                                                                            property styles

                                                                            styles: AnimationStyleMetadata;
                                                                            • The CSS styles associated with this state.

                                                                            interface AnimationStyleMetadata

                                                                            interface AnimationStyleMetadata extends AnimationMetadata {}
                                                                            • Encapsulates an animation style. Instantiated and returned by the style() function.

                                                                            property offset

                                                                            offset: number | null;
                                                                            • A percentage of the total animate time at which the style is to be applied.

                                                                            property styles

                                                                            styles:
                                                                            | '*'
                                                                            | {
                                                                            [key: string]: string | number;
                                                                            }
                                                                            | Array<
                                                                            | {
                                                                            [key: string]: string | number;
                                                                            }
                                                                            | '*'
                                                                            >;
                                                                            • A set of CSS style properties.

                                                                            interface AnimationTransitionMetadata

                                                                            interface AnimationTransitionMetadata extends AnimationMetadata {}
                                                                            • Encapsulates an animation transition. Instantiated and returned by the transition() function.

                                                                            property animation

                                                                            animation: AnimationMetadata | AnimationMetadata[];
                                                                            • One or more animation objects to which this transition applies.

                                                                            property expr

                                                                            expr:
                                                                            | string
                                                                            | ((
                                                                            fromState: string,
                                                                            toState: string,
                                                                            element?: any,
                                                                            params?: {
                                                                            [key: string]: any;
                                                                            }
                                                                            ) => boolean);
                                                                            • An expression that describes a state change.

                                                                            property options

                                                                            options: AnimationOptions | null;
                                                                            • An options object containing a delay and developer-defined parameters that provide styling defaults and can be overridden on invocation. Default delay is 0.

                                                                            interface AnimationTriggerMetadata

                                                                            interface AnimationTriggerMetadata extends AnimationMetadata {}
                                                                            • Contains an animation trigger. Instantiated and returned by the trigger() function.

                                                                            property definitions

                                                                            definitions: AnimationMetadata[];
                                                                            • An animation definition object, containing an array of state and transition declarations.

                                                                            property name

                                                                            name: string;
                                                                            • The trigger name, used to associate it with an element. Unique within the component.

                                                                            property options

                                                                            options: {
                                                                            params?: {
                                                                            [name: string]: any;
                                                                            };
                                                                            } | null;
                                                                            • An options object containing a delay and developer-defined parameters that provide styling defaults and can be overridden on invocation. Default delay is 0.

                                                                            interface ɵStyleData

                                                                            interface ɵStyleData {}
                                                                            • Represents a set of CSS styles for use in an animation style.

                                                                            index signature

                                                                            [key: string]: string | number;

                                                                              Enums

                                                                              enum AnimationMetadataType

                                                                              const enum AnimationMetadataType {
                                                                              State = 0,
                                                                              Transition = 1,
                                                                              Sequence = 2,
                                                                              Group = 3,
                                                                              Animate = 4,
                                                                              Keyframes = 5,
                                                                              Style = 6,
                                                                              Trigger = 7,
                                                                              Reference = 8,
                                                                              AnimateChild = 9,
                                                                              AnimateRef = 10,
                                                                              Query = 11,
                                                                              Stagger = 12,
                                                                              }
                                                                              • 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.

                                                                              member Animate

                                                                              Animate = 4
                                                                              • Contains an animation step. See animate()

                                                                              member AnimateChild

                                                                              AnimateChild = 9
                                                                              • Contains data to use in executing child animations returned by a query. See animateChild()

                                                                              member AnimateRef

                                                                              AnimateRef = 10
                                                                              • Contains animation parameters for a re-usable animation. See useAnimation()

                                                                              member Group

                                                                              Group = 3
                                                                              • Contains a set of animation steps. See {@link animations/group group()}

                                                                              member Keyframes

                                                                              Keyframes = 5
                                                                              • Contains a set of animation steps. See keyframes()

                                                                              member Query

                                                                              Query = 11
                                                                              • Contains child-animation query data. See query()

                                                                              member Reference

                                                                              Reference = 8
                                                                              • Contains a re-usable animation. See animation()

                                                                              member Sequence

                                                                              Sequence = 2
                                                                              • Contains a set of animation steps. See sequence()

                                                                              member Stagger

                                                                              Stagger = 12
                                                                              • Contains data for staggering an animation sequence. See stagger()

                                                                              member State

                                                                              State = 0
                                                                              • Associates a named animation state with a set of CSS styles. See state()

                                                                              member Style

                                                                              Style = 6
                                                                              • Contains a set of CSS property-value pairs into a named style. See style()

                                                                              member Transition

                                                                              Transition = 1
                                                                              • Data for a transition from one animation state to another. See transition()

                                                                              member Trigger

                                                                              Trigger = 7
                                                                              • Associates an animation with an entry trigger that can be attached to an element. See trigger()

                                                                              Type Aliases

                                                                              type AnimateTimings

                                                                              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;
                                                                              };
                                                                              • Represents animation-step timing parameters for an animation step.

                                                                                See Also

                                                                                • animate()

                                                                              Package Files (1)

                                                                              Dependencies (1)

                                                                              Dev Dependencies (0)

                                                                              No dev dependencies.

                                                                              Peer Dependencies (1)

                                                                              Badge

                                                                              To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                              You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@angular/animations.

                                                                              • Markdown
                                                                                [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@angular/animations)
                                                                              • HTML
                                                                                <a href="https://www.jsdocs.io/package/@angular/animations"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>