From dc789c647d3e31db86df41d641b550611d461420 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Thu, 17 Apr 2025 15:26:56 +0300 Subject: [PATCH] docs(Window): add animation docs --- components/window/animation.md | 125 +++++++++++++++++++++++++++++++++ components/window/overview.md | 4 ++ 2 files changed, 129 insertions(+) create mode 100644 components/window/animation.md diff --git a/components/window/animation.md b/components/window/animation.md new file mode 100644 index 000000000..795b7a769 --- /dev/null +++ b/components/window/animation.md @@ -0,0 +1,125 @@ +--- +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. 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: + +* `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. + +## Example + +````RAZOR +
+
+ + +
+ +
+ + +
+ +
+ @(Visible ? "Hide Window" : "Show Window") +
+
+ + + + Animations + + + Current animation type: @Animation + + + +@code { + private bool Visible { get; set; } + private int Duration { get; set; } = 300; + private string Top { get; set; } = "50%"; + private string Left { get; set; } = "50%"; + + private List? AnimationTypes { get; set; } + private WindowAnimationType Animation { get; set; } = WindowAnimationType.ZoomOut; + + private async Task ChangeAnimation(WindowAnimationType animation) + { + Animation = WindowAnimationType.None; + Visible = false; + // Artificial delay to reset the animation for demonstration purposes + await Task.Delay(500); + Animation = animation; + Visible = true; + } + + protected override async Task OnInitializedAsync() + { + AnimationTypes = new List(); + + // Populate the list of animation types + foreach (WindowAnimationType animation in Enum.GetValues(typeof(WindowAnimationType))) + { + AnimationTypes.Add(animation); + } + + // Artificial delay to show the window after initialization for the sake of the example + await Task.Delay(500); + Visible = true; + + await base.OnInitializedAsync(); + } +} +```` + +## Limitations + +When the Window is set to be inside a container, it may appear outside of it after the animation completes. This occurs because animation classes scale the Window component, causing it to render inside the container initially, but move outside after the transition ends. + +## See Also + +* [Blazor Window Overview](slug:window-overview) \ No newline at end of file diff --git a/components/window/overview.md b/components/window/overview.md index 79a797697..eae328dca 100644 --- a/components/window/overview.md +++ b/components/window/overview.md @@ -64,6 +64,10 @@ Read more about the [Blazor Window position...](slug:components/window/position) You can maximize, minimize, or close the Window through the action buttons in its titlebar. [Read more about the Blazor Window action buttons...](slug:components/window/actions) +## Animations + +You can set the animation of the Window with the `AnimationType` parameter. Read more about the [Blazor Window animations...](slug:window-animations) + ## Dragging You can move the Window on the page by dragging its titlebar. [Read more about the Blazor Window dragging option...](slug:window-draggable)