Blazor AnimationContainer Overview
The Blazor Animation Container component enables you to create messages and popups or expandable containers. It lets you define its animation, size and position, and arbitrary content.
The Animation Container component is part of Telerik UI for Blazor, a
professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
If you are looking for an option to create Notification, Tooltip or expandable container such as Drawer, you may use the dedicated components.
Creating Blazor AnimationContainer
- Use the
TelerikAnimationContainertag. - Assign a reference to the component instance via
@ref. - Add content as
ChildContentinside theTelerikAnimationContainertag. - (optional) Define the
AnimationTypeorAnimationDuration. - (optional) Set parameters for dimensions or position.
Basic AnimationContainer
<TelerikButton OnClick="@ToggleAnimationContainer">Toggle Animation Container</TelerikButton>
<TelerikAnimationContainer @ref="@TAC"
AnimationType="@AnimationType.ZoomIn"
Width="300px"
Top="100px"
Left="100px">
<div style="padding: 1em; color: #fff; background: #282f89; text-align: center;">
Telerik Blazor Animation Container
</div>
</TelerikAnimationContainer>
@code {
private TelerikAnimationContainer TAC { get; set; }
private async Task ToggleAnimationContainer()
{
await TAC.ToggleAsync();
}
}
Position
The Animation Container renders at the place of its declaration. It has a position:absolute CSS style, so it will display over adjacent elements. The component position can be offset by parent elements with a position style, even of the Top and Left parameters are set.
The component should reside outside elements with an overflow CSS style. Otherwise, it may be clipped or overlapped by other scrollable containers. This limitation does not exist for the Popup and Popover components.
Animation
One of the core features of the Animation Container is the customizable open and close animation type and animation duration. Set the AnimationDuration parameter in milliseconds as int. The possible AnimationType values are the members of the AnimationType enum:
NoneFadePushUpPushDownPushLeftPushRightRevealVerticalSlideUpSlideIn-
SlideDown(default) SlideRightSlideLeftZoomInZoomOut
AnimationContainer animation options
<label>
Animation Type:
<TelerikDropDownList Data="@AnimationTypes"
Value="@SelectedAnimationType"
ValueChanged="@( (AnimationType newValue) => OnDropDownValueChanged(newValue) )"
Width="160px" />
</label>
<label>
Animation Duration:
<TelerikNumericTextBox @bind-Value="@SelectedAnimationDuration"
Min="0"
Max="7000"
Width="100px" />
</label>
<TelerikButton OnClick="@ToggleAnimationContainer">Toggle Animation Container</TelerikButton>
<TelerikAnimationContainer @ref="@TAC"
AnimationType="@SelectedAnimationType"
AnimationDuration="@SelectedAnimationDuration"
Width="300px"
Top="100px"
Left="200px">
<div style="padding: 1em; color: #fff; background: #282f89; text-align: center;">
Telerik Blazor Animation Container
</div>
</TelerikAnimationContainer>
@code {
private TelerikAnimationContainer TAC { get; set; }
private List<AnimationType> AnimationTypes { get; set; }
private AnimationType SelectedAnimationType { get; set; } = AnimationType.SlideDown;
private int SelectedAnimationDuration { get; set; } = 300;
private async Task ToggleAnimationContainer()
{
await TAC.ToggleAsync();
}
private async Task OnDropDownValueChanged(AnimationType newAnimationType)
{
await TAC.HideAsync();
SelectedAnimationType = newAnimationType;
await TAC.ShowAsync();
}
protected override void OnInitialized()
{
AnimationTypes = new List<AnimationType>();
foreach (AnimationType animation in Enum.GetValues(typeof(AnimationType)))
{
AnimationTypes.Add(animation);
}
base.OnInitialized();
}
}
AnimationContainer Parameters
| Parameter | Type and Default Value | Description |
|---|---|---|
AnimationDuration |
int ( 300) |
The length of the opening and closing animations. |
AnimationType |
AnimationType enum ( SlideDown) |
The animation type (fade, slide, push, zoom, etc.). |
Class |
string |
The custom CSS class to be rendered on the <div> element, which wraps the component ChildContent. This is not the outermost component container. See ParentClass. |
Height |
string |
The height CSS style of the div.k-animation-container element. |
HideDelay |
int |
The milliseconds between the closing animation and the Animation Container removal from the DOM. |
Left |
string |
The left CSS style of the div.k-animation-container element. |
ParentClass |
string |
The custom CSS class to be rendered on the <div class="k-animation-container> element. This is the outermost component element, which has the position and dimension styles. See Class. |
ParentInlineStyle |
string |
The custom inline CSS styles to be rendered on the div.k-animation-container element. |
ShowDelay |
int |
The time in millisends between the Animation Container rendering and the opening animation. |
Top |
string |
The top CSS style of the div.k-animation-container element. |
Width |
string |
The width CSS style of the div.k-animation-container element. |
AnimationContainer Reference and Methods
The Animation Container provides methods for programmatic operation. To use them, define a reference to the component instance with the @ref attribute. The available methods are:
-
ShowAsync()- to display the component; -
HideAsync()- to hide the component; -
ToggleAsync()- if you want to use a single method for both operations.
To show an Animation Container immediately when the page loads, use the
OnAfterRenderAsyncevent.
Use AnimationContainer reference and methods
<TelerikAnimationContainer @ref="@TAC">
<div style="padding: 1em; color: #fff; background: #282f89; text-align: center;">
Telerik Blazor Animation Container
</div>
</TelerikAnimationContainer>
@code {
private TelerikAnimationContainer TAC { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await TAC.ShowAsync();
}
}
}