@angular/animations

Variables

• AUTO_STYLE
• ɵPRE_STYLE

Functions

• animate()
• animateChild()
• animation()
• group()
• keyframes()
• query()
• sequence()
• stagger()
• state()
• style()
• transition()
• trigger()
• useAnimation()

Classes

• AnimationBuilder

  • build()
  • ɵfac
  • ɵprov
• AnimationFactory

  • create()
• NoopAnimationPlayer

  • destroy()
  • finish()
  • getPosition()
  • hasStarted()
  • init()
  • onDestroy()
  • onDone()
  • onStart()
  • parentPlayer
  • pause()
  • play()
  • reset()
  • restart()
  • setPosition()
  • totalTime
• ɵAnimationGroupPlayer

  • beforeDestroy()
  • destroy()
  • finish()
  • getPosition()
  • hasStarted()
  • init()
  • onDestroy()
  • onDone()
  • onStart()
  • parentPlayer
  • pause()
  • play()
  • players
  • reset()
  • restart()
  • setPosition()
  • totalTime
• ɵBrowserAnimationBuilder

  • build()
  • ɵfac
  • ɵprov

Interfaces

• AnimateChildOptions

  • duration
• AnimationAnimateChildMetadata

  • options
• AnimationAnimateMetadata

  • styles
  • timings
• AnimationAnimateRefMetadata

  • animation
  • options
• AnimationEvent

  • disabled
  • element
  • fromState
  • phaseName
  • toState
  • totalTime
  • triggerName
• AnimationGroupMetadata

  • options
  • steps
• AnimationKeyframesSequenceMetadata

  • steps
• AnimationMetadata

  • type
• AnimationOptions

  • delay
  • params
• AnimationPlayer

  • beforeDestroy
  • destroy()
  • finish()
  • getPosition()
  • hasStarted()
  • init()
  • onDestroy()
  • onDone()
  • onStart()
  • parentPlayer
  • pause()
  • play()
  • reset()
  • restart()
  • setPosition()
  • totalTime
• AnimationQueryMetadata

  • animation
  • options
  • selector
• AnimationQueryOptions

  • limit
  • optional
• AnimationReferenceMetadata

  • animation
  • options
• AnimationSequenceMetadata

  • options
  • steps
• AnimationStaggerMetadata

  • animation
  • timings
• AnimationStateMetadata

  • name
  • options
  • styles
• AnimationStyleMetadata

  • offset
  • styles
• AnimationTransitionMetadata

  • animation
  • expr
  • options
• AnimationTriggerMetadata

  • definitions
  • name
  • options
• ɵStyleData

Enums

• AnimationMetadataType

  • Animate
  • AnimateChild
  • AnimateRef
  • Group
  • Keyframes
  • Query
  • Reference
  • Sequence
  • Stagger
  • State
  • Style
  • Transition
  • Trigger
• ɵRuntimeErrorCode

  • ANIMATION_FAILED
  • BROWSER_ANIMATION_BUILDER_INJECTED_WITHOUT_ANIMATIONS
  • BUILDING_FAILED
  • CREATE_ANIMATION_FAILED
  • INVALID_CSS_UNIT_VALUE
  • INVALID_DEFINITION
  • INVALID_EXPRESSION
  • INVALID_KEYFRAMES
  • INVALID_NODE_TYPE
  • INVALID_OFFSET
  • INVALID_PARALLEL_ANIMATION
  • INVALID_PARAM_VALUE
  • INVALID_PROPERTY
  • INVALID_QUERY
  • INVALID_STAGGER
  • INVALID_STATE
  • INVALID_STYLE_PARAMS
  • INVALID_STYLE_VALUE
  • INVALID_TIMING_VALUE
  • INVALID_TRANSITION_ALIAS
  • INVALID_TRIGGER
  • KEYFRAME_OFFSETS_OUT_OF_ORDER
  • KEYFRAMES_MISSING_OFFSETS
  • MISSING_EVENT
  • MISSING_OR_DESTROYED_ANIMATION
  • MISSING_PLAYER
  • MISSING_TRIGGER
  • NEGATIVE_DELAY_VALUE
  • NEGATIVE_STEP_VALUE
  • REGISTRATION_FAILED
  • TRANSITION_FAILED
  • TRIGGER_BUILD_FAILED
  • TRIGGER_PARSING_FAILED
  • TRIGGER_TRANSITIONS_FAILED
  • UNREGISTERED_TRIGGER
  • UNSUPPORTED_TRIGGER_EVENT
  • VALIDATION_FAILED

Type Aliases

• AnimateTimings
• ɵStyleDataMap

variable AUTO_STYLE

const AUTO_STYLE: string;

• Specifies automatic styling.

variable ɵPRE_STYLE

const ɵPRE_STYLE: string;

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 (not all elements can be queried via these tokens, see [Entering and Leaving Elements](#entering-and-leaving-elements)) - query(":animating") : Query all currently animating elements. - query("@triggerName") : Query elements that contain an animation trigger. - query("@*") : Query all elements that contain an animation triggers. - query(":self") : Include the current element into the animation sequence.

  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.

  ### Multiple Tokens

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

  ### Entering and Leaving Elements

  Not all elements can be queried via the :enter and :leave tokens, the only ones that can are those that Angular assumes can enter/leave based on their own logic (if their insertion/removal is simply a consequence of that of their parent they should be queried via a different token in their parent's :enter/:leave transitions).

  The only elements Angular assumes can enter/leave based on their own logic (thus the only ones that can be queried via the :enter and :leave tokens) are: - Those inserted dynamically (via ViewContainerRef) - Those that have a structural directive (which, under the hood, are a subset of the above ones)

  Note that elements will be successfully queried via :enter/:leave even if their insertion/removal is not done manually via ViewContainerRefor caused by their structural directive (e.g. they enter/exit alongside their parent).

  There is an exception to what previously mentioned, besides elements entering/leaving based on their own logic, elements with an animation trigger can always be queried via :leave when their parent is also leaving.

  ### Usage Example

  The following example queries for inner elements and animates them individually using animate().

  @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](api/animations/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 an element to animate from a height of 0 up to its full height:

  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 which is played when a certain specified condition is met.

  Parameter stateChangeExpr

  A string with a specific format or a function that specifies when the animation transition should occur (see [State Change Expression](#state-change-expression)).

  Parameter steps

  One or more animation objects that represent the animation's instructions.

  Parameter options

  An options object that can be used to specify a delay for the animation or provide custom parameters for it.

  Returns

  An object that encapsulates the transition data.

  ### State Change Expression

  The State Change Expression instructs Angular when to run the transition's animations, it can either be - a string with a specific syntax - or a function that compares the previous and current state (value of the expression bound to the element's trigger) and returns true if the transition should occur or false otherwise

  The string format can be: - fromState => toState, which indicates that the transition's animations should occur then the expression bound to the trigger's element goes from fromState to toState

  _Example:_ ```typescript transition('open => closed', animate('.5s ease-out', style({ height: 0 }) )) ```

  - fromState <=> toState, which indicates that the transition's animations should occur then the expression bound to the trigger's element goes from fromState to toState or vice versa

  _Example:_ ```typescript transition('enabled <=> disabled', animate('1s cubic-bezier(0.8,0.3,0,1)')) ```

  - :enter/:leave, which indicates that the transition's animations should occur when the element enters or exists the DOM

  _Example:_ ```typescript transition(':enter', [ style({ opacity: 0 }), animate('500ms', style({ opacity: 1 })) ]) ```

  - :increment/:decrement, which indicates that the transition's animations should occur when the numerical expression bound to the trigger's element has increased in value or decreased

  _Example:_ ```typescript transition(':increment', query('@counter', animateChild())) ```

  - a sequence of any of the above divided by commas, which indicates that transition's animations should occur whenever one of the state change expressions matches

  _Example:_ ```typescript transition(':increment, * => enabled, :enter', animate('1s ease', keyframes([ style({ transform: 'scale(1)', offset: 0}), style({ transform: 'scale(1.1)', offset: 0.7}), style({ transform: 'scale(1)', offset: 1}) ]))), ```

  Also note that in such context: - void can be used to indicate the absence of the element - asterisks can be used as wildcards that match any state - (as a consequence of the above, void => * is equivalent to :enter and * => void is equivalent to :leave) - true and false also match expression values of 1 and 0 respectively (but do not match _truthy_ and _falsy_ values)

  Be careful about entering end leaving elements as their transitions present a common pitfall for developers.

  Note that when an element with a trigger enters the DOM its :enter transition always gets executed, but its :leave transition will not be executed if the element is removed alongside its parent (as it will be removed "without warning" before its transition has a chance to be executed, the only way that such transition can occur is if the element is exiting the DOM on its own).

  ### Animating to a Final State

  If the final step in a transition is a call to animate() that uses a timing value with no style data, that step is automatically considered the final animation arc, for the element to reach the final state, in such case Angular automatically adds or removes CSS styles to ensure that the element is in the correct final state.

  ### Usage Examples

  - Transition animations applied based on the trigger's expression value

  ```html <div [@myAnimationTrigger]="myStatusExp"> ... ```

  ```typescript trigger("myAnimationTrigger", [ ..., // states transition("on => off, open => closed", animate(500)), transition("* <=> error", query('.indicator', animateChild())) ]) ```

  - Transition animations applied based on custom logic dependent on the trigger's expression value and provided parameters

  ```html <div [@myAnimationTrigger]="{ value: stepName, params: { target: currentTarget } }"> ... ```

  ```typescript trigger("myAnimationTrigger", [ ..., // states transition( (fromState, toState, _element, params) => ['firststep', 'laststep'].includes(fromState.toLowerCase()) && toState === params?.['target'], animate('1s') ) ]) ```

function trigger

trigger: (
    name: string,
    definitions: AnimationMetadata[]
) => AnimationTriggerMetadata;

• Creates a named animation trigger, containing a list of [state()](api/animations/state) and transition() entries to be evaluated when the expression bound to the trigger changes.

  Parameter name

  An identifying string.

  Parameter definitions

  An animation definition object, containing an array of [state()](api/animations/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.