Blazor Animation - set div to display: none after animation ends

Question

Recently I have implemented some animations but I am having some problems when the animation ends. I have a div structure for responsiveness, that shows a menu button when the screen size is smaller than X.

When someone clicks on the menu button a left side bar, which is default set to display:none, is being shown by removing the display: none property immediately and then adding an animation class, this all works fine. However, when the sidebar is collapsed again (by clicking on a close button), a new animation (for removing the menu) is being added, when this animation ends I need to set the display back to display:none (I don't want the sidebar take up any space).

In the current situation I accomplished this by setting some boolean variables that add display:none on false and removes it on true. My animation takes up to 300MS so I added a Task.Delay of 300MS to set the boolean. Sadly this doesn't create a perfect 'flow', you can see the screen hiccup because the setting of the display:none happens just a few MS to late. Of course I can decrease the Task.Delay to 290MS~ but this isn't a great solution.

Any ideas how I can accomplish this using Blazor?

Below the code:

HTML:

<!-- The mobile side bar, display: none default on screen sizes > X  --> 
<div class="md:hidden" style=@mobileSideBarDisplay>
    <div class="fixed inset-0 flex z-40">

        <! this sets the opacity of tyhe space to the right (grayed out) --> 
        <div class="fixed inset-0 @sidebarOverlayAnimation">
            <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
        </div>

        <!-- the actual side bar with it's buttons -->
        <div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-gray-800  @sidebarMenuAnimation">
            <!-- Close button with which the sidebar menu can be closed -->
            <button class=".." aria-label="Close sidebar" @onclick="ToggleSidebar"></button>

            ... Left out for readability
        </div>
    </div>
</div>


<!-- Static sidebar for desktop -->
<div class="hidden md:flex md:flex-shrink-0">
    .. Left out for readability
</div>

<!-- menu button div which becomes visible at screensize < X
<div class="flex flex-col w-0 flex-1 overflow-hidden">

    <!-- Menu button with which the sidebar menu can be opened -->
    <button class=".. md:hidden" aria-label="Open sidebar" @onclick="ToggleSidebar">
    .. Left out for readability
</div>

C# backend code:

@code {

    // used to set display: none; (or empty)
    private bool showMobileSideBar = false;

    // Used to show / toggle animations
    private bool showMobileSideBarAnimation = false; 


    // toggle animation and display classes
    private string mobileSideBarDisplay => showMobileSideBar ? "" : "display: none;"; 
    private string sidebarOverlayAnimation => showMobileSideBarAnimation ? "sidebar-overlay-animation-entering" : "sidebar-overlay-animation-leaving";
    private string sidebarMenuAnimation => showMobileSideBarAnimation ? "sidebar-menu-animation-entering" : "sidebar-menu-animation-leaving";

    // Function to display entering or leaving animation depending on the boolean value)
    private async Task ToggleSidebar()
    {
        showMobileSideBarAnimation = !showMobileSideBarAnimation;
        if (showMobileSideBar == true) // only delay when we need to set div to display: none;
        {
            await Task.Delay(300); // this works kinda clunky now
        }
        showMobileSideBar = !showMobileSideBar;

    }

}

The CSS / animations:

/*
    Animations for setting the right-space opacity (when the sidebar is shown / hidden)
*/

.sidebar-overlay-animation-entering {
    animation-name: sidebar-overlay-entering;
    animation-duration: 300ms;
    animation-timing-function: linear;
}

@keyframes sidebar-overlay-entering {
    from { opacity: 0; }
    to { opacity: 1; } 
}

.sidebar-overlay-animation-leaving {
    animation-name: sidebar-overlay-leaving;
    animation-duration: 300ms;
    animation-timing-function: linear;
}

@keyframes sidebar-overlay-leaving {
    from { opacity: 1; }
    to { opacity: 0; }
}




/*
    Animations for displaying the sidebar (in- and out)
*/


.sidebar-menu-animation-entering {
    animation-name: sidebar-menu-entering;
    animation-duration: 300ms;
    animation-timing-function: ease-in-out;
}

@keyframes sidebar-menu-entering {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.sidebar-menu-animation-leaving {
    animation-name: sidebar-menu-leaving;
    animation-duration: 300ms;
    animation-timing-function: ease-in-out;
}

@keyframes sidebar-menu-leaving {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

P.S. I tried using https://github.com/dazinator/BlazorDeferredRemove but I cant get it this to work. There is also not an example using animations (only transition with visibility) or using display: none; (But perhaps the library can work if someone could give a few pointers)

Answer 1

I Guess you can achieve your need with BlazorAnimation by subscribing to OnAnimationEnd

https://github.com/aboudoux/BlazorAnimation