Stacked Animations

All Animations extend the Animation component.

However, the Push and Zoom Animations further extend Animation by using the stackChildren options and enable you to stack animations.

Entering and Exiting Child Elements

To stack entering and exiting child elements within the same block container, set the stackChildren property to true. The stack effect is most suitable for replacing an existing child element with a new one.

Example
View Source
Edit In Stackblitz  
Change Theme:

Dynamic Calculation of Container Size

When stackChildren is set to true, the Push and Zoom Animations dynamically calculate the size of their animation container based on the size of the entering child, while rendering both animations in the same container.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?