如何根据条件对 SwiftUI 中的视图应用不同类型的过渡

Question

In my current project I have transitions applied to my authentication views. However, on sign in, I want a different transition to appear. (Different than if the user simply clicked the "back" button)

Here is some code for a basic mock up I made:

Auth View:

struct AuthView: View {
    
    @EnvironmentObject var testModel: TestModel //Not used yet, used later

    @State private var showSignIn: Bool = false
    @State private var showSignUp: Bool = false
    
    var body: some View {
        if (!showSignIn && !showSignUp) {
            WelcomeView(showSignIn: $showSignIn, showSignUp: $showSignUp)
                .transition(AnyTransition.asymmetric(insertion: AnyTransition.move(edge: .leading), removal: AnyTransition.move(edge: .leading)))
        } else if showSignIn {
            SignInView(showSignIn: $showSignIn)
                .transition(AnyTransition.move(edge: .trailing))
        } else {
            SignUpView(showSignUp: $showSignUp)
                .transition(AnyTransition.move(edge: .trailing))
        }
    }
}

Welcome View code:

struct WelcomeView: View {
    
    @Binding var showSignIn: Bool
    @Binding var showSignUp: Bool
    
    var body: some View {
        VStack {
            
            Text("Welcome!")
                
            Button(action: { withAnimation { showSignIn.toggle() } }) {
                Text("Sign In")
                    .underline()
                    .foregroundColor(.white)
            }
            
            Button(action: { withAnimation { showSignUp.toggle() } }) {
                Text("Sign Up")
                    .underline()
                    .foregroundColor(.white)
            }
            
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.blue.ignoresSafeArea())
    }
}

Sign in view:

struct SignInView: View {
    
    @EnvironmentObject var testModel: TestModel
    
    @Binding var showSignIn: Bool
    
    var body: some View {
        VStack {
            
            Text("Sign In")
                
            Button(action: { withAnimation { showSignIn.toggle() } }) {
                Text("Go back")
                    .underline()
                    .foregroundColor(.white)
            }
            
            Button(action: { withAnimation { testModel.signedIn.toggle() } }) {
                Text("Complete Sign In")
                    .underline()
                    .foregroundColor(.white)
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.green.ignoresSafeArea())
    }
}

ContentView:

struct ContentView: View {
    
    @StateObject var testModel = TestModel()
    
    var body: some View {
        
        if testModel.signedIn {
            
            Text("Home page")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color.green)
                .transition(AnyTransition.opacity)
                .onTapGesture {
                    testModel.signedIn.toggle()
                }
            
        } else {
            
            AuthView()
                .environmentObject(testModel)
            
        }
    }
}

What it makes:

What I want:

I'm trying to apply a different transition effect when I "finish" the sign in process. In my mock up, I simulated this through clicking "Complete sign in"

I tried changing my SignInView code (in my AuthView) to this, applying a ternary operator to the transitions:

SignInView(showSignIn: $showSignIn)
                .transition(AnyTransition.move(edge: (testModel.signedIn ? .bottom : .trailing)))

But it had no effect.

Thanks for any help in advance!

Answer 1

I solved my own question!

I made a new @State variable, with a type of AnyTransition , using that variable in replacement of my ternary operator. I then used logic to change the type of transition (the @State variable) when I run my log-in function.