css - Blazor 动画 - 将 div 设置为显示：动画结束后无

Question

最近我实现了一些动画，但是当动画结束时我遇到了一些问题。我有一个用于响应的 div 结构，当屏幕尺寸小于 X 时，它会显示一个菜单按钮。

当有人单击菜单按钮时，默认设置为 的左侧栏会display:none通过立即删除display: none属性然后添加动画类来显示，这一切都很好。但是，当侧边栏再次折叠时（通过单击关闭按钮），正在添加一个新动画（用于删除菜单），当此动画结束时，我需要将显示设置回display:none（我不想要侧边栏占用任何空间）。

在当前情况下，我通过设置一些布尔变量来实现这一点，这些变量添加display:nonefalse 并删除它为 true。我的动画最多占用 300 毫秒，所以我添加了一个Task.Delay300 毫秒来设置布尔值。遗憾的是，这并没有创建一个完美的“流程”，您可以看到屏幕打嗝，因为设置display:none发生在几毫秒到晚。当然，我可以将其降低Task.Delay到 290MS~ 但这不是一个很好的解决方案。

任何想法如何使用 Blazor 完成此任务？

代码下方：

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#后端代码：

@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;

    }

}

CSS / 动画：

/*
    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%); }
}

PS 我尝试使用https://github.com/dazinator/BlazorDeferredRemove但我无法让它工作。也没有使用动画的示例（仅具有可见性的过渡）或使用display: none;（但如果有人可以给出一些指示，也许该库可以工作）

标签： cssanimationblazor