SwiftUI中如何为视图插入与移除设置不同速度的过渡动画？

你确实误解了.animation修饰符在Transition中的作用，这也是代码未达到预期效果的核心原因。

错误原因 #

Transition实例上的.animation()方法不是用来定义动画的曲线、时长等参数，它的核心作用是控制该过渡是否继承外部的动画上下文（比如你用withAnimation包裹状态变化时的全局动画）。当你在withAnimation中触发showDetails的状态切换时，外部的动画会直接覆盖你在过渡里设置的.animation()配置，导致自定义的时长和曲线完全不生效。

正确实现方式 #

方式一：移除外部withAnimation，直接给过渡绑定动画

这种方式不需要依赖外部动画上下文，直接给插入、移除过渡分别绑定对应的动画参数：

struct TestView: View {
    @State private var showDetails = false

    var body: some View {
        VStack {
            Button("Press to show details") {
                // 移除withAnimation，直接切换状态
                showDetails.toggle()
            }

            if showDetails {
                Text("Details go here.")
                    .background(Color.blue)
                    .transition(
                        .asymmetric(
                            insertion: .move(edge: .leading).animation(.easeIn(duration: 2)),
                            removal: .move(edge: .trailing).animation(.easeOut(duration: 5))
                        )
                    )
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

方式二：保留withAnimation，用Transaction区分动画

如果需要保留withAnimation的使用（比如统一管理多个视图的动画），可以通过Transaction动态给插入、移除阶段设置不同的动画：

struct TestView: View {
    @State private var showDetails = false

    var body: some View {
        VStack {
            Button("Press to show details") {
                withAnimation {
                    showDetails.toggle()
                }
            }

            if showDetails {
                Text("Details go here.")
                    .background(Color.blue)
                    .transition(
                        .asymmetric(
                            insertion: .move(edge: .leading),
                            removal: .move(edge: .trailing)
                        )
                    )
                    .transaction { tx in
                        // 根据状态判断是插入还是移除，设置对应动画
                        tx.animation = showDetails ? .easeIn(duration: 2) : .easeOut(duration: 5)
                    }
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

关键总结 #

• Transition.animation()的作用是控制过渡是否继承外部动画上下文，而非定义动画参数
• 要实现插入/移除阶段的差异化动画，要么直接给过渡绑定独立动画，要么通过Transaction动态覆盖动画配置

内容的提问来源于stack exchange，提问作者jeff-h