group

From Get docs
< @angular/animationsAngular/docs/10/api/animations/group


group

function

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

group(steps: AnimationMetadata[], options: AnimationOptions = null): AnimationGroupMetadata

Parameters
steps AnimationMetadata[]

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" }))
])
options AnimationOptions

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

Optional. Default is null.

Returns

AnimationGroupMetadata: An object that encapsulates the group data.


Usage notes

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.


© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v10.angular.io/api/animations/group