VStack flashing of space between views

Question

The VStack has two components header and detail. When we tap on the "show" button, it shows the View (header + detail of the VStack). However, it results in Flashing effect when the view Slides in.

After the animation is complete the View spacing looks fine. During the animation it shows spacing for a while before disappearing at the end of animation, how can this be fixed?

struct StackAnimation: View {
    @State var show: Bool
    var body: some View {
        ZStack {
            Button {
                show.toggle()
            } label: {
                Text("Show View")
            }
            
            ZStack{
                VStack{ // animation
                    if show {
                        VStack(spacing: 0) { // VStack with no spacing
                            VStack {
                                Text("Header")
                                
                            }
                            .frame(maxWidth: .infinity, maxHeight: 30.0)
                            .background(Color.white)
                            Text("Detail")
                                .frame(maxWidth: .infinity, maxHeight: .infinity)
                                .background(Color.white)
                        }.cornerRadius(10.0).padding(.top, 20)
                            .transition(.move(edge: .bottom))
                    }
                }.animation(.spring().delay(0.3), value: show)
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.green)
        
    }
}

struct StackAnimation_Previews: PreviewProvider {
    static var previews: some View {
        StackAnimation(show: false)
    }
}

Answer 1

You can use the following code within If condition.

                    VStack(spacing: 0) {
                          VStack {
                              Text("Header")
                          }
                          .frame(maxHeight: 30.0)
                          Text("Detail")
                              .frame(maxHeight: .infinity)
                      }
                      .frame(maxWidth: .infinity)
                      .background(Color.white)
                      .cornerRadius(10.0)
                      .padding(.top, 20)
                      .transition(.move(edge: .bottom))

Answer 2

You can try the following two ways:

[01] Revising the frame and background (Prioritize)

OR

[02] Replace the .animation(.spring().delay(0.3), value: show) line with the .animation(.easeInOut(duration: 0.4), value: show) line

The code you wrote looks like this:

struct StackAnimation: View {
    @State var show: Bool
    var body: some View {
        ZStack {
            Button {
                show.toggle()
            } label: {
                Text("Show View")
            }
            
            ZStack{
                VStack{
                    if show {
                        VStack(spacing: 0) {
                            VStack {
                                Text("Header")
                                
                            }
                            //[01]
                            //.frame(maxWidth: .infinity, maxHeight: 30.0)
                            //.background(Color.white)
                            .frame(maxHeight: 30)
                            
                            Text("Detail")
                            //[01]
                            //.frame(maxWidth: .infinity, maxHeight: .infinity)
                            //.background(Color.white)
                            .frame(maxHeight: .infinity)
                        }
                        //[01]
                        .frame(maxWidth: .infinity)
                        .background(Color.white)
                        
                        .cornerRadius(10.0).padding(.top, 20)
                        .transition(.move(edge: .bottom))
                    }
                }
                //[02]
                .animation(.spring().delay(0.3), value: show)
                //.animation(.easeInOut(duration: 0.4), value: show)
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.green)
        
    }
}

struct StackAnimation_Previews: PreviewProvider {
    static var previews: some View {
        StackAnimation(show: false)
    }
}

Result: