Direction

Except for the Fade Animation, the Animations provide a set of the predefined directions which allow you to control their entering and exiting effects.

The Fade Animation does not feature a configurable direction because it represents a transition in the opacity of the element.

To define the direction of the entering and exiting animations, use the direction property of each Animation type.

Expand

The Expand Animation supports the following predefined directions:

  • (Default) verticalExpands the content from center to top and bottom, and vice-versa.
  • horizontalExpands the content from center to left and right, and vice-versa.
Example
View Source
Edit In Stackblitz  
Change Theme:

Push

The Push Animation supports the following predefined directions:

  • (Default) rightPushes the content from left to right.
  • upPushes the content from bottom to top.
  • downPushes the content from top to bottom.
  • leftPushes the content from right to left.
Example
View Source
Edit In Stackblitz  
Change Theme:

Reveal

The Reveal Animation supports the following predefined directions:

  • (Default) verticalReveals the height of the content.
  • horizontalReveals the width of the content.
Example
View Source
Edit In Stackblitz  
Change Theme:

Slide

The Slide Animation supports the following predefined directions:

  • (Default) downSlides the content from top to bottom, and vice-versa.
  • upSlides the content from bottom to top, and vice-versa.
  • leftSlides the content from right to left, and vice-versa.
  • rightSlides the content from left to right, and vice-versa.
Example
View Source
Edit In Stackblitz  
Change Theme:

Zoom

The Zoom Animation supports the following predefined directions:

  • (Default) outZooms the content from the outside to the inside.
  • inZooms the content from the inside to the outside.
Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?