CODEWITHSUNDEEP
iosanimationswiftui
Heimdallr
Heimdallr

Reputation: 239

How to animate transitions between child views with slide effect in SwiftUI?

I want to animate transitions between child views with slide effect but the way I do it doesn't work. How to do it right?

ContentView.swift:

struct ContentView: View {
    @EnvironmentObject var session: SessionStore
    
    var body: some View {
        Group {
            if(self.session.session != nil && (Auth.auth().currentUser?.isEmailVerified)!){
                VStack{
                Text("Welcome to the app")
                Button(action: {session.signOut()}){
                    Text("Sign Out")
                }
                }.transition(.move(edge: .trailing))
                //also I tried .transition(.slide))
            }
            
            if(self.session.session != nil && !(Auth.auth().currentUser?.isEmailVerified)!){
                EmailVerificationView()
                    .transition(.move(edge: .trailing))
            }
            
            if(self.session.session == nil){
                SignInView()
                    .transition(.move(edge: .trailing))
            }
        }.onAppear(perform: {
            session.listen()
        })  
    }
}

Upvotes: 2

Views: 585

Answers (1)

Asperi
Asperi

Reputation: 257493

You need animatable container for that. Try to use ZStack instead of Group

var body: some View {
    ZStack {
        if(self.session.session != nil && (Auth.auth().currentUser?.isEmailVerified)!){
            VStack{
            Text("Welcome to the app")
            Button(action: {session.signOut()}){
                Text("Sign Out")
            }
            }.transition(.move(edge: .trailing))
            //also I tried .transition(.slide))
        }
        
        if(self.session.session != nil && !(Auth.auth().currentUser?.isEmailVerified)!){
            EmailVerificationView()
                .transition(.move(edge: .trailing))
        }
        
        if(self.session.session == nil){
            SignInView()
                .transition(.move(edge: .trailing))
        }
    }
    .animation(.default)
    .onAppear(perform: {
        session.listen()
    })  
}

Upvotes: 3

Related Questions