It will be nice to have boundary detection for animation container

The AnimationContainer leaves its <div class="k-animation-container"> element visible on the page even after the component is hidden. This can prevent user access to elements behind this <div>.

This is a regression in version 6.1.0.

Reproduced on the online demos: https://demos.telerik.com/blazor-ui/animationcontainer/overview

I use an AnimationContainer to create a notification popup. It animates on the way in, pauses for a few seconds, and then animates back out. If I navigate to another page during the delay, it looks like .HideAsync() still gets called and it causes an error.

Error: System.ObjectDisposedException: Cannot access a disposed object.
Object name: 'DotNetObjectReference`1'.

Here is a test page. The yellow code causes the issue. The green code is the workaround.

@implements IDisposable

<TelerikButton OnClick="@ToggleContainer">Toggle Animation Container</TelerikButton>

<NavLink href="/">Go to Home page</NavLink>

<TelerikAnimationContainer @ref="AnimContainer" Top="50px" Left="50px" Width="250px" Height="150px"
                           AnimationType="AnimationType.ZoomOut" Class="k-popup">
    AnimationContainer
</TelerikAnimationContainer>

@code {
    TelerikAnimationContainer AnimContainer { get; set; }

    async Task ToggleContainer()
    {
        await AnimContainer.ShowAsync();

        await Task.Delay(3000);

        //if (AnimContainer != null)
        //{
            await AnimContainer.HideAsync();
        //}
    }

    void IDisposable.Dispose()
    {
        AnimContainer = null;
    }
}

When you want to update parameters from many places, it may be more convenient to set them by calling a function that will implement the necessary logic.

Using this for the AnimationContainer's Height parameter does not work, however.

A sample is attached below.