This is a migrated thread and some comments may be shown as answers.

Change AnimationType Depending on Action (Open versus Close)

3 Answers 92 Views
AnimationContainer
This is a migrated thread and some comments may be shown as answers.
Rob
Top achievements
Rank 1
Rob asked on 10 Mar 2021, 07:37 PM

I am simply trying to toggle an Animation Container and have it ZoomOut when it opens, but ZoomIn when it closes. Thought I could update the AnimationType using the reference, but does not work. Please see attached.

3 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 11 Mar 2021, 12:02 PM

Hello Rob,

You should set the parameters, not the instance properties - setting parameters lets the component react and re-render.

The key thing is that you need to give the framework a bit of time to re-render with the new settings so that they can take affect, and a small Task.Delay() is the usual way to do that:

 

<div style="position:relative; border: 1px solid red; height: 300px;">
    <TelerikButton OnClick="@ToggleContainer" >Toggle Animation Container</TelerikButton>

    <TelerikAnimationContainer @ref="myPopupRef" Top="50px" Left="50px" Width="250px" Height="150px" 
                               AnimationType="@DesiredAnmation" Class="k-popup" >
        <p>
            The "k-popup" class adds some background and borders which you can define through your own styles instead.
        </p>
        <p>
            My parent element has <code>position: relative</code> to control my <code>Top</code> and <code>Left</code> offset.
        </p>
    </TelerikAnimationContainer>
</div>

@code {
    Telerik.Blazor.Components.TelerikAnimationContainer myPopupRef;

    bool toggledOpen = false;
    AnimationType DesiredAnmation => toggledOpen ? AnimationType.ZoomIn : AnimationType.ZoomOut;

    async Task ToggleContainer()
    {
        toggledOpen = !toggledOpen;

        await Task.Delay(30); // give the framework time to re-render with the new settings

        await myPopupRef.ToggleAsync();
    }
}

 

On another note, would you mind if I moved this thread to the public forums so other people can see this scenario and benefit from it?

Regards,
Marin Bratanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Rob
Top achievements
Rank 1
answered on 12 Mar 2021, 12:52 AM
Great answer and of course share this question/answer publicly. ;)
0
Marin Bratanov
Telerik team
answered on 12 Mar 2021, 07:15 AM

Hello Rob,

Thank you for this, the thread is now public at https://www.telerik.com/forums/change-animationtype-depending-on-action-open-versus-close

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
AnimationContainer
Asked by
Rob
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Rob
Top achievements
Rank 1
Share this question
or