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
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
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
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
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
Change Theme:
