@angular/animations

animation

함수

사용 중단 권고v20.2부터

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

사용 중단을 권고합니다.

Use animate.enter or animate.leave instead. Intent to remove in v23

API

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

@deprecated

Use animate.enter or animate.leave instead. Intent to remove in v23

@paramstepsAnimationMetadata | AnimationMetadata[]

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.

@paramoptionsAnimationOptions | null

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.

@returnsAnimationReferenceMetadata

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.