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 100+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free 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

1. Use the TelerikAnimationContainer tag.
2. Assign a reference to the component instance via @ref.
3. Add content as ChildContent inside the TelerikAnimationContainer tag.
4. (optional) Define the AnimationType or AnimationDuration.
5. (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 will not exist for the future Popup component.

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

See Also

• Live Demos: Animation Container
• AnimationContainer API Reference
• Hide the AnimationContainer on outside click