animation

function experimental

npm Package	@angular/animations
Module	import { animation } from '@angular/animations';
Source	animations/src/animation_metadata.ts

function animation(steps: AnimationMetadata | AnimationMetadata[], options: AnimationOptions | null = null): AnimationReferenceMetadata;

Description

animation is an animation-specific function that is designed to be used inside of Angular's animation DSL language.

var myAnimation = animation(...) is designed to produce a reusable animation that can be later invoked in another animation or sequence. Reusable animations are designed to make use of animation parameters and the produced animation can be used via the useAnimation method.

var fadeAnimation = animation([
  style({ opacity: '{{ start }}' }),
  animate('{{ time }}',
    style({ opacity: '{{ end }}'}))
], { params: { time: '1000ms', start: 0, end: 1 }});

If parameters are attached to an animation then they act as default parameter values. When an animation is invoked via useAnimation then parameter values are allowed to be passed in directly. If any of the passed in parameter values are missing then the default values will be used.

useAnimation(fadeAnimation, {
  params: {
    time: '2s',
    start: 1,
    end: 0
  }
})

If one or more parameter values are missing before animated then an error will be thrown.