diff --git a/components/window/animation.md b/components/window/animation.md new file mode 100644 index 000000000..f4a695c93 --- /dev/null +++ b/components/window/animation.md @@ -0,0 +1,131 @@ +--- +title: Animations +page_title: Animations +description: Learn about the animation options for the Telerik Window component in Blazor. +slug: window-animations +tags: telerik,blazor,window,animations +published: True +position: 4 +--- + +# Blazor Window Animations + +The Telerik Window component for Blazor provides an option to control the opening animations to enhance the user experience. You can configure the animation type and duration using the following parameters: + +## Parameters + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + +| Parameter | Type and Default Value| Description | +|--------------------|------------------------------------|-------------| +| `AnimationType`| `WindowAnimationType` (`None`)| Specifies the type of animation used when the window opens or closes. The full list of animation types is listed in the section below. | +| `AnimationDuration`| `int` (`300`)| Defines the duration of the animation in milliseconds. | + +## WindowAnimation Types + +The `WindowAnimationType` enumeration includes the following options: + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + +| Animation Type | Description | +|----------------|-------------------------------------------------------------------------------------------------| +| `None` (default)| No animation. | +| `SlideUp` | Slides in from the bottom and slides out to the bottom. | +| `SlideDown` | Slides in from the top and slides out to the top. | +| `SlideRight` | Slides in from the left and slides out to the left. | +| `SlideLeft` | Slides in from the right and slides out to the right. | +| `PushUp` | Pushes in from the bottom and pushes out to the top. | +| `PushDown` | Pushes in from the top and pushes out to the bottom. | +| `PushLeft` | Pushes in from the right and pushes out to the left. | +| `PushRight` | Pushes in from the left and pushes out to the right. | +| `Fade` | Fades in and out. | +| `ZoomIn` | Zooms in from a larger size to its actual size and zooms out by expanding before disappearing. | +| `ZoomOut` | Zooms in from a smaller size to its actual size and zooms out by shrinking to the center. | + +> When using animations other than the default (`None`), it is recommended to explicitly set the `Top` and `Left` parameters to control the Window position or center it on the screen. Without these settings, the Window will be positioned to the bottom-left corner of the screen. Explicit positioning ensures the Window appears in the intended location during and after the animation. + +## Example + +````RAZOR +