SwiftUI中NavigationView内转场动画失效问题及解决方案咨询

位置1放置NavigationView无动画的原因 #

NavigationView是SwiftUI中负责导航栈管理的特殊容器，当你把它包裹在整个条件渲染结构外层时，displayView的切换会导致NavigationView的根视图直接替换（从Button视图变为NextView）。这个过程属于NavigationView自身的导航栈根节点变更，SwiftUI会优先处理NavigationView的导航逻辑，忽略你为NextView设置的自定义transition动画。

位置2放置NavigationView无动画的原因 #

当你在条件分支内包裹NavigationView时，每次displayView变为true都会创建一个新的NavigationView实例。NavigationView初始化时会先构建自身的导航结构（包括导航栏、栈状态等），这个初始化过程会干扰外部设置的transition，导致动画无法正常触发——本质上是你在切换的是NavigationView容器本身，而非NextView这个子视图，容器视图的transition会被自身的初始化逻辑覆盖。

位置3或不使用NavigationView时有动画的原因 #

此时NextView是作为普通视图参与条件渲染，没有被NavigationView的导航栈逻辑干扰。SwiftUI会正确识别transition(.slide)修饰符，在视图添加/移除时，按照动画上下文（withAnimation包裹的状态变更）执行转场动画。

方案1：ZStack叠加视图，保持NavigationView根视图稳定 #

通过ZStack将初始按钮和NextView放在同一层级，让NavigationView始终持有固定的根视图（ZStack），避免根视图切换触发NavigationView的栈重置。同时用zIndex确保NextView显示在按钮上方：

import SwiftUI

struct NextView: View {
    @State var text = ""
    @Binding var displayView: Bool
    
    var body: some View {
        VStack {
            Spacer()
            TextField("Type something!", text: $text)
            Button("Remove View") {
                withAnimation {
                    displayView = false
                }
            }
            Spacer()
        }
        .background(Color.cyan)
    }
}

struct InitialView: View {
    @State var displayView = false
    
    var body: some View {
        NavigationView { // 位置1保留NavigationView
            ZStack {
                // 初始视图始终存在于ZStack底层
                Button("Tap to continue") {
                    withAnimation {
                        displayView = true
                    }
                }
                
                // NextView通过条件控制显示/隐藏，应用转场动画
                if displayView {
                    NextView(displayView: $displayView)
                        .transition(.slide)
                        .zIndex(1) // 确保NextView在按钮上方
                }
            }
        }
    }
}

方案2：用NavigationLink的isActive绑定（兼容你的场景） #

如果你可以接受间接使用NavigationLink（而非直接用跳转触发），可以用NavigationLink(isActive:)绑定displayView，同时隐藏导航栏，模拟自定义转场效果：

struct InitialView: View {
    @State var displayView = false
    
    var body: some View {
        NavigationView { // 位置1保留NavigationView
            Button("Tap to continue") {
                withAnimation {
                    displayView = true
                }
            }
            // 隐藏NavigationLink的默认样式，通过isActive控制跳转
            .background(
                NavigationLink(isActive: $displayView) {
                    NextView(displayView: $displayView)
                        .navigationBarHidden(true) // 隐藏导航栏，保持自定义样式
                } label: {
                    EmptyView()
                }
            )
        }
    }
}

这个方案利用NavigationView的原生导航栈，但通过隐藏NavigationLink的视觉元素，实现和你原本逻辑一致的触发方式，同时可以保留转场动画（如需自定义转场，可在NextView添加transition）。

内容的提问来源于stack exchange，提问作者Laura Corssac