MudBlazor抽屉收缩时，带Tooltip的导航链接图标闪烁问题

问题描述 #

模拟Gmail抽屉交互：点击汉堡图标展开/收起抽屉，展开状态显示图标+文字标签，收起状态仅显示图标，且收起时通过Tooltip提示功能。但实现过程中，抽屉收缩动画期间，被Tooltip包裹的导航链接图标会闪到正确位置的右侧，动画不流畅。

解决方法 #

该问题源于Tooltip组件的定位逻辑在抽屉动画过程中与MudNavLink的布局产生冲突，导致图标偏移。以下两种方法可解决：

方法1：仅用Tooltip包裹图标而非整个NavLink #

将Tooltip的作用范围缩小到MudNavLink的图标部分，避免Tooltip的定位影响整个NavLink的布局动画：

<MudLayout>
    <MudAppBar>
        <MudIconButton Icon="@Icons.Material.Filled.Menu" OnClick="@ToggleDrawer" />
        <MudText>Drawer collapse animation fixed</MudText>
    </MudAppBar>

    <MudDrawer @bind-Open="@open" Variant="@DrawerVariant.Mini" ClipMode="DrawerClipMode.Always" Breakpoint="Breakpoint.Xs">
        <MudNavMenu>
            <MudNavLink Href="/">
                <MudTooltip Text="Document List" Placement="Placement.Right">
                    <MudIcon Icon="@Icons.Material.Filled.List" />
                </MudTooltip>
                Document List
            </MudNavLink>
            <MudNavLink Href="/senddocument">
                <MudTooltip Text="Send Document" Placement="Placement.Right">
                    <MudIcon Icon="@Icons.Material.Filled.Send" />
                </MudTooltip>
                Send Document
            </MudNavLink>
            <MudNavLink Href="/managetemplate">
                <MudTooltip Text="Manage Template" Placement="Placement.Right">
                    <MudIcon Icon="@Icons.Material.Filled.EditNote" />
                </MudTooltip>
                Manage Template
            </MudNavLink>
            <MudDivider Class="my-2" />
            <MudNavLink Href="/faq">
                <MudTooltip Text="FAQ" Placement="Placement.Right">
                    <MudIcon Icon="@Icons.Material.Filled.QuestionAnswer" />
                </MudTooltip>
                FAQ
            </MudNavLink>
            <MudNavLink Href="/reporterror">
                <MudTooltip Text="Report an Error" Placement="Placement.Right">
                    <MudIcon Icon="@Icons.Material.Filled.Error" />
                </MudTooltip>
                Report an Error
            </MudNavLink>
            <MudNavLink Href="/logout">
                <MudTooltip Text="Logout" Placement="Placement.Right">
                    <MudIcon Icon="@Icons.Material.Filled.Logout" />
                </MudTooltip>
                Logout
            </MudNavLink>
        </MudNavMenu>
    </MudDrawer>
</MudLayout>

@code {
    bool open = false;

    void ToggleDrawer()
    {
        open = !open;
    }
}

方法2：根据抽屉状态动态显示Tooltip #

仅在抽屉收起时渲染Tooltip，展开时直接显示NavLink，避免动画过程中Tooltip的定位干扰：

<MudLayout>
    <MudAppBar>
        <MudIconButton Icon="@Icons.Material.Filled.Menu" OnClick="@ToggleDrawer" />
        <MudText>Drawer collapse animation fixed</MudText>
    </MudAppBar>

    <MudDrawer @bind-Open="@open" Variant="@DrawerVariant.Mini" ClipMode="DrawerClipMode.Always" Breakpoint="Breakpoint.Xs">
        <MudNavMenu>
            @if (!open)
            {
                <MudTooltip Text="Document List" Placement="Placement.Right">
                    <MudNavLink Href="/" Icon="@Icons.Material.Filled.List">Document List</MudNavLink>
                </MudTooltip>
            }
            else
            {
                <MudNavLink Href="/" Icon="@Icons.Material.Filled.List">Document List</MudNavLink>
            }

            @if (!open)
            {
                <MudTooltip Text="Send Document" Placement="Placement.Right">
                    <MudNavLink Href="/senddocument" Icon="@Icons.Material.Filled.Send">Send Document</MudNavLink>
                </MudTooltip>
            }
            else
            {
                <MudNavLink Href="/senddocument" Icon="@Icons.Material.Filled.Send">Send Document</MudNavLink>
            }

            <MudDivider Class="my-2" />
            
            @if (!open)
            {
                <MudTooltip Text="FAQ" Placement="Placement.Right">
                    <MudNavLink Href="/faq" Icon="@Icons.Material.Filled.QuestionAnswer">FAQ</MudNavLink>
                </MudTooltip>
            }
            else
            {
                <MudNavLink Href="/faq" Icon="@Icons.Material.Filled.QuestionAnswer">FAQ</MudNavLink>
            }

            @if (!open)
            {
                <MudTooltip Text="Report an Error" Placement="Placement.Right">
                    <MudNavLink Href="/reporterror" Icon="@Icons.Material.Filled.Error">Report an Error</MudNavLink>
                </MudTooltip>
            }
            else
            {
                <MudNavLink Href="/reporterror" Icon="@Icons.Material.Filled.Error">Report an Error</MudNavLink>
            }

            @if (!open)
            {
                <MudTooltip Text="Logout" Placement="Placement.Right">
                    <MudNavLink Href="/logout" Icon="@Icons.Material.Filled.Logout">Logout</MudNavLink>
                </MudTooltip>
            }
            else
            {
                <MudNavLink Href="/logout" Icon="@Icons.Material.Filled.Logout">Logout</MudNavLink>
            }
        </MudNavMenu>
    </MudDrawer>
</MudLayout>

@code {
    bool open = false;

    void ToggleDrawer()
    {
        open = !open;
    }
}

内容的提问来源于stack exchange，提问作者Dustin Luck