Docs4dev
Docs
angular / 12 / api / animations / group.html

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–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v12.angular.io/api/animations/group