Blazor AnimationContainer Overview

Updated over 6 months ago

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.Start Free Trial

The AnimationContainer animates and renders content in-place and does not have all the features of a true popup. Compare the abilities of all Telerik Blazor popup components to verify if the Popup or Popover components are more suitable for your needs. 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 TelerikAnimationContainer tag.
Assign a reference to the component instance via @ref.
Add content as ChildContent inside the TelerikAnimationContainer tag.
(optional) Define the AnimationType or AnimationDuration.
(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:

None
Fade
PushUp
PushDown
PushLeft
PushRight
RevealVertical
SlideUp
SlideIn
SlideDown (default)
SlideRight
SlideLeft
ZoomIn
ZoomOut

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 OnAfterRenderAsync event.

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();
        }
    }
}