New to Kendo UI for Vue? Start a free 30-day trial

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) vertical—Expands the content from center to top and bottom, and vice-versa.
  • horizontal—Expands 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) right—Pushes the content from left to right.
  • up—Pushes the content from bottom to top.
  • down—Pushes the content from top to bottom.
  • left—Pushes the content from right to left.
Example
View Source
Edit In Stackblitz  
Change Theme:

Reveal

The Reveal Animation supports the following predefined directions:

  • (Default) vertical—Reveals the height of the content.
  • horizontal—Reveals the width of the content.
Example
View Source
Edit In Stackblitz  
Change Theme:

Slide

The Slide Animation supports the following predefined directions:

  • (Default) down—Slides the content from top to bottom, and vice-versa.
  • up—Slides the content from bottom to top, and vice-versa.
  • left—Slides the content from right to left, and vice-versa.
  • right—Slides 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) in—Zooms the content from the outside to the inside.
  • out—Zooms 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?