SwiftUI嵌套子视图过渡动画失效原因及多子视图过渡方案咨询

一、嵌套子视图过渡不生效的原因 #

SwiftUI的.transition()动画仅在视图被添加到视图层级或从层级中移除的瞬间触发。你的代码中，Text与外层VStack是作为一个整体被条件语句（if isShown）控制添加的——当isShown变为true时，整个VStack（包含内部Text）一次性被加入视图树，Text没有经历“单独添加”的过程，因此它的过渡动画不会被触发。而VStack本身是被条件语句直接控制添加/移除的，所以它的过渡动画能正常运行。

二、给VStack内多个Text设置不同过渡的方法 #

要让每个子视图的过渡动画生效，需要确保每个子视图的添加/移除操作是独立的，或者在父视图出现时逐个触发它们的动画。以下是两种实用方案：

方案1：为每个子视图绑定独立的显示状态 #

给每个Text单独设置@State变量控制显示/隐藏，让每个视图的添加/移除操作独立于父视图，这样各自的过渡动画会被正确触发：

struct TransitionTestView: View {
    @State var isParentShown = false
    @State var isText1Shown = false
    @State var isText2Shown = false
    
    public init() {}
    
    public var body: some View {
        if isParentShown {
            VStack {
                if isText1Shown {
                    Text("Hello!")
                        .font(.title)
                        .transition(.move(edge: .leading))
                }
                if isText2Shown {
                    Text("World!")
                        .font(.title)
                        .transition(.move(edge: .trailing))
                }
            }
        } else {
            Button("Show") {
                withAnimation {
                    isParentShown = true
                }
                // 延迟触发子视图动画，形成序列效果
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                    withAnimation {
                        isText1Shown = true
                    }
                }
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.6) {
                    withAnimation {
                        isText2Shown = true
                    }
                }
            }
        }
    }    
}

方案2：利用动画延迟配合过渡 #

如果不想使用多个状态变量，可以给每个子视图设置不同的动画延迟，结合transition和animation(_:value:)，让它们在父视图出现时依次执行过渡：

struct TransitionTestView: View {
    @State var isShown = false
    
    public init() {}
    
    public var body: some View {
        if isShown {
            VStack {
                Text("Hello!")
                    .font(.title)
                    .transition(.move(edge: .leading))
                    .animation(.easeInOut(duration: 0.5).delay(0), value: isShown)
                
                Text("World!")
                    .font(.title)
                    .transition(.move(edge: .trailing))
                    .animation(.easeInOut(duration: 0.5).delay(0.3), value: isShown)
            }
            .transition(.opacity) // 父视图使用淡入过渡
        } else {
            Button("Show") {
                withAnimation {
                    isShown = true
                }
            }
        }
    }    
}

这里通过指定animation的value为isShown，确保当isShown变化时，子视图的过渡动画被触发；不同的delay参数可以实现子视图动画的先后顺序，配合不同的transition就能达成差异化的动画效果。

若需要子视图在父视图隐藏时也显示过渡动画，只需在isShown变为false时，先逐个隐藏子视图，再隐藏父视图即可。

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