SwiftUI button withAnimation + transition issue when background color in on the window

Question

Dear SwiftUI community,

I'm trying to creating a text field that toggles show/hidden with a move up/down animation on the clicking of a button.

I found this helpful source on how to make this.

However, when I tried it on my own code it only worked on the show toggle and not on the hide toggle (also when running on my iPhone). After completely stripping down my code until below, I found that this issue gets resolved when I remove the (background) color on the initial ZStack.

I don't understand why this is the case. Is this a SwiftUI bug or is there any logic behind this? Also, I'm not sure how to now add a background to this Window without messing up the animation of the textfield again.

Does anyone have more information on this?

Thanks in advance!

Best, Paul

import SwiftUI

struct MatchResultsInput: View {
    
    @State private var show = false
    
    var body: some View {

        ZStack {
            Color(#colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1))
                .ignoresSafeArea()
            
            VStack {
                Button(action: {
                    withAnimation {
                        show.toggle()
                    }
                }) {
                    Text("Show/Hide button")
                        .foregroundColor(.white)
                        .bold()
                }
                .padding(5)
                .background(Color(#colorLiteral(red: 0.2117647059, green: 0.8, blue: 0.5176470588, alpha: 1)))
                .clipShape(Capsule())
                
                Spacer()
                
            }
            
            if show {
                
                VStack {
                    
                    Text("16")
                        .foregroundColor(.gray)
                        .font(.system(size: 30))
                        .bold()   
                }
                .transition(.move(edge: .bottom))                
            }
        }
    }
}

struct MatchResultsInput_Previews: PreviewProvider {
    static var previews: some View {
        MatchResultsInput()
    }
}

Answer 1

Because you're adding/removing views inside a ZStack, you'll need to set the zIndex. Otherwise, SwiftUI might immediately reorder the stack and you won't get a transition.

if show {
    VStack {
        Text("16")
            .foregroundColor(.gray)
            .font(.system(size: 30))
            .bold()
    }
    .transition(.move(edge: .bottom))
    .zIndex(2) /// here!
}

Result:

Answer 2

I don't think it's a bug. I can fix it by adding zIndex like below. Please try and let me know if it works for you too. Happy coding!

struct MatchResultsInput: View {

    @State private var show = false
    var body: some View {
        ZStack {
            Color(#colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1))
                .ignoresSafeArea()
                .zIndex(0)
            ...
            if show {
                VStack {
                    ...
                }
                .transition(.move(edge: .bottom))
                .zIndex(1)
            }
        }
    }
}