Angular Animation: Exploring the group Function
Primary entry point exports
Functions - group
The "group" function in Angular Animation is used to define a list of animation steps that will be executed in parallel. This is useful when you want to animate multiple properties simultaneously or when you need to run several animations at the same time. Here are the details of this function:
Syntax:
Parameters:
- steps (required): An array of animation step objects. Each step is defined using functions like style() or animate().
- options (optional): An options object containing delay and developer-defined parameters that provide styling defaults and can be overridden when invoking the animation. The default is "null".
Example:
In this example, we have an animation that changes the background color to black in 1 second and the text color to white in 2 seconds. Both animations occur simultaneously due to the use of the "group" function.
Usage Notes:
1. Instant Execution: When steps are defined using function calls like style() or animate(), each call within the group is executed instantly.
2. Offset Styles: If you want to specify styles to be applied at a later time, you can define steps with keyframes() or use animate() calls with a delay value.
3. Options: The "options" parameter allows you to set delay and other developer-defined parameters that provide styling defaults and can be overridden when invoking the animation.
4. Return Object: The function returns an AnimationGroupMetadata object that encapsulates the group data.
5. Usage in Sequences and Transitions: When called within a sequence() or transition() call, it does not continue to the next instruction until all of the inner animation steps have completed.
This function is especially useful when you need to animate different properties at the same time or when you require specific synchronization between different parts of your animation.
Comments
Post a Comment