SwiftUI View 不会在过渡动画结束后立即消失

Question

我创建了一个带有移动转换的应用程序，它使用 SwiftUI 从下方发送一个视图。但是当View消失的时候，过渡动画就结束了，但是View还停留了1秒左右。

这是我的代码。

struct ContentView: View {
    @State var animation: Bool = false
    var body: some View {
        VStack {

            // This is the Button
            Button(action: {
                withAnimation(.spring(dampingFraction: 1, blendDuration: 0.5)) {
                    animation.toggle()
                }
            }) {
                Image(systemName: "star.fill")
                    .resizable()
                    .frame(width: 100, height: 100)
                    .foregroundColor(.accentColor)
            }
            
            // This condition sends up the View
            if animation {
                SecondView()
                    .transition(.move(edge: .bottom))
            }
        }
        .padding()
    }
}

struct SecondView: View {
    var body: some View {
        VStack {
            Text("Hello, world!")
                .font(.largeTitle)
                .fontWeight(.bold)
            Spacer()
        }
    }
}

Answer 1

我认为您需要做的是使用动画修改器将动画直接应用到您的按钮，这样您的代码可能如下所示：

Button(action: {
            withAnimation {
                animation.toggle()
            }
        }) {
            Image(systemName: "star.fill")
                .resizable()
                .frame(width: 100, height: 100)
                .foregroundColor(.accentColor)
        }
        .animation(.spring(dampingFraction: 1,    blendDuration: 0.5), value: animation)
        if animation {
            SecondView()
                .transition(.move(edge: .bottom))
        }

Answer 2

从

Spacer()

中删除

SecondView()

，SwiftUI 很难用那个间隔符进行这种转换。相反，对 SecondView 的大小更明确，为此更改您的 SecondView 代码：

struct SecondView: View {
    var body: some View {
        VStack {
            Text("Hello, world!")
                .font(.largeTitle)
                .fontWeight(.bold)
        }
        .frame(maxHeight: .infinity)
    }
}

记得在模拟器上检查这段代码，因为预览对于测试转换是不可靠的。