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!
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.