{ "id": "api/animations/group", "title": "group", "contents": "\n\n
\n
\n
\n \n API > @angular/animations\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

grouplink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

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

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

An array of animation step objects.

\n
    \n
  • When steps are defined by style() or animate()\nfunction calls, each call within the group is executed instantly.
    • \n
  • To specify offset styles to be applied at a later time, define steps with\nkeyframes(), or use animate() calls with a delay value.\nFor example:
    • \n
\n\ngroup([\n animate(\"1s\", style({ background: \"black\" })),\n animate(\"2s\", style({ color: \"white\" }))\n])\n\n\n
\n \n options\n AnimationOptions\n

An options object containing a delay and\ndeveloper-defined parameters that provide styling defaults and\ncan be overridden on invocation.

\n

Optional. Default is null.

\n\n
\n\n \n
Returns
\n

AnimationGroupMetadata: An object that encapsulates the group data.

\n \n \n\n\n \n\n \n
\n\n\n \n\n \n\n\n\n \n
\n

Usage noteslink

\n

Grouped animations are useful when a series of styles must be\nanimated at different starting times and closed off at different ending times.

\n

When called within a sequence() or a\ntransition() call, does not continue to the next\ninstruction until all of the inner animation steps have completed.

\n\n
\n\n\n\n
\n
\n\n\n" }