SwiftUI转场动画异常：子元素单独执行动画而非整体滑动

你遇到的问题源于隐式动画的作用范围过广，叠加SwiftUI布局系统特性导致：

1. 你在ZStack上添加的.animation(.easeInOut, value: page)是全局隐式动画，会作用于所有因page变化触发的视图属性变更——不仅是整个页面的转场动画，还包括子视图内部的布局调整（比如LoginView中Group的frame设置引发的布局计算）。
2. 转场动画本身针对视图的插入/移除，而隐式动画又额外给子元素的布局变化添加了独立动画，两者叠加就导致子元素和父视图的动画速度不一致，出现错位。

最直接的修复方式是移除ZStack上的隐式动画，改用显式动画控制转场：

修改Entrypoint.swift #

去掉ZStack上的隐式动画，在修改page状态的函数中用withAnimation包裹：

import SwiftUI

enum Page {
    case login, onboarding, home
}

struct Entrypoint: View {
    @State var onboarding: Bool = true
    @State var page: Page = .login
    
    func finishLogin() {
        withAnimation(.easeInOut) {
            page = .onboarding
        }
    }

    func finishOnboarding() {
        withAnimation(.easeInOut) {
            page = .home
        }
    }
    
    // Slide transition
    let transition = AnyTransition.asymmetric(insertion: .move(edge: .trailing), removal: .offset(x: -24))

    var body: some View {
        ZStack {
            switch page {
            case .login:
                LoginView(finish: finishLogin)
                    .transition(transition)
            case .onboarding:
                OnboardingView(finish: finishOnboarding)
                    .transition(transition)
            case .home:
                RootView()
                    .transition(transition)
            }
        }
    }
}

额外优化（可选） #

如果子视图内有易受隐式动画影响的布局属性，可在子视图中用.transaction禁用不必要的动画，比如修改LoginView：

import SwiftUI

struct LoginView: View {
    var finish: () -> Void

    init(finish: @escaping () -> Void) {
        self.finish = finish
    }
    
    var body: some View {
        VStack {
            Group {
                Text("Hello, World!")
                
                Button(action: {
                    finish()
                }) {
                    Text("Login")
                }
            }
            .frame(minWidth: 0, maxWidth: .infinity)
            .transaction { $0.animation = nil }
            
        }
        .background(Color.green)
        .frame(minWidth: 0, maxWidth: .infinity)
    }
}

修改后，转场动画只会作用于整个页面视图的插入和移除，子元素会固定在父视图内同步移动，不会再出现各自独立动画的问题。

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