如何在不导航框架的情况下触发WebView2页面过渡动画？

手动触发内置页面过渡动画 #

如果是WinUI 3环境，你可以给WebView2所在的页面添加内置过渡动画，然后在显示Frame时手动触发：

• 先在WebView2页面的XAML中定义过渡效果：

<Page.Transitions>
    <TransitionCollection>
        <EntranceThemeTransition FromHorizontalOffset="200" />
    </TransitionCollection>
</Page.Transitions>

• 在代码后台显示Frame时，找到页面的过渡动画并启动：

// 假设webViewFrame是你的持久化Frame
if (webViewFrame.Content is Page webViewPage)
{
    foreach (var transition in webViewPage.Transitions)
    {
        if (transition is EntranceThemeTransition entranceTransition)
        {
            entranceTransition.Begin(webViewPage);
            break;
        }
    }
}

注意：WPF环境中可通过BeginAnimation方法直接给元素启动对应动画，API逻辑类似。

自定义过渡动画替代 #

如果内置动画触发不便，直接做自定义动画绑定Frame的显示状态：

• 在XAML中给持久化Frame添加Storyboard动画：

<Grid>
    <!-- 其他导航内容 -->
    <Frame x:Name="webViewFrame" Visibility="Collapsed" Opacity="0">
        <!-- WebView2页面内容 -->
    </Frame>

    <Storyboard x:Name="ShowWebViewAnimation">
        <DoubleAnimation Storyboard.TargetName="webViewFrame" 
                         Storyboard.TargetProperty="Opacity"
                         From="0" To="1" Duration="0:0:0.3"/>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="webViewFrame"
                                       Storyboard.TargetProperty="Visibility">
            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>

    <Storyboard x:Name="HideWebViewAnimation">
        <DoubleAnimation Storyboard.TargetName="webViewFrame" 
                         Storyboard.TargetProperty="Opacity"
                         From="1" To="0" Duration="0:0:0.3"/>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="webViewFrame"
                                       Storyboard.TargetProperty="Visibility">
            <DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="Collapsed"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</Grid>

• 在切换导航时，直接调用对应的Storyboard：

// 显示WebView页面时
ShowWebViewAnimation.Begin();
// 隐藏WebView页面时
HideWebViewAnimation.Begin();

这种方式支持完全自定义动画效果，可按需调整滑动、缩放等过渡逻辑。

模拟导航式过渡小技巧 #

如果想贴近原生导航的动画质感，可在切换时给当前显示页面和WebView Frame同时做动画——比如让原页面滑出、WebView页面滑入，视觉上完全模拟原生导航效果，实现逻辑和自定义动画一致，仅需同时操作两个元素的动画参数。

内容的提问来源于stack exchange，提问作者Biff MaGriff