SwiftUI如何实现Toggle开关的顶部滑入过渡动画？

问题描述 #

开启「Any special requests?」开关时，希望「Add extra frosting」和「Add extra sprinkles」两个开关实现从顶部滑入的动画效果，但当前代码使用.transition(.slide)呈现的是左右滑入的样式，无法达到预期，请问该如何修改代码？

当前代码：

struct ContentView: View {
    @StateObject var order = Order()
    
    var body: some View {
        NavigationStack {
            Form {
                Section {
                    Picker("Select your cake type", selection: $order.type) {
                        ForEach(Order.types.indices) {
                            Text(Order.types[$0])
                        }
                    }
                    
                    Stepper("**Number of cakes: \(order.quantity)**", value: $order.quantity, in: 3...20)
                }
                
                Section {
                    Toggle("Any special requests?", isOn: $order.specialRequestEnabled.animation())
                    
                    if order.specialRequestEnabled {
                        Toggle("Add extra frosting", isOn: $order.extraFrosting)
                            .transition(.slide)
                        Toggle("Add extra sprinkles", isOn: $order.addSprinkles)
                            .transition(.slide)
                    }
                }
            }
            .navigationTitle("CupcakeCorner")
        }
    }
}

修改方案 #

要实现从顶部滑入的动画，需要替换默认过渡效果并优化动画作用范围，具体修改如下：

1. 替换过渡类型：用.move(edge: .top)替代.slide，这个过渡会让视图从顶部边缘滑入/滑出，完全匹配预期效果。
2. 统一动画单元：将两个开关放入VStack容器中，给容器添加过渡效果，确保两个开关同步执行滑入动画，避免各自单独动画的不协调感。
3. 保留状态动画绑定：继续保持order.specialRequestEnabled.animation()的设置，确保状态切换时自动触发过渡动画。

修改后的完整代码：

struct ContentView: View {
    @StateObject var order = Order()
    
    var body: some View {
        NavigationStack {
            Form {
                Section {
                    Picker("Select your cake type", selection: $order.type) {
                        ForEach(Order.types.indices) {
                            Text(Order.types[$0])
                        }
                    }
                    
                    Stepper("**Number of cakes: \(order.quantity)**", value: $order.quantity, in: 3...20)
                }
                
                Section {
                    Toggle("Any special requests?", isOn: $order.specialRequestEnabled.animation())
                    
                    if order.specialRequestEnabled {
                        VStack(spacing: 0) {
                            Toggle("Add extra frosting", isOn: $order.extraFrosting)
                            Toggle("Add extra sprinkles", isOn: $order.addSprinkles)
                        }
                        .transition(.move(edge: .top))
                    }
                }
            }
            .navigationTitle("CupcakeCorner")
        }
    }
}

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