SwiftUI transitions between views, no transition-CodePudding

I want to have a transition between a gameView and a menuView, and no matter what I do I do not see a transition between the views either in a simulator or with my iPhone.

That's where I have conditions between views, and where I mention the transition.

struct gameApp: App {
    @ObservedObject var appState = AppState(isGameActive: false)
    
    var body: some Scene {
        WindowGroup {
            
            if appState.isGameActive == false {
                MenuView()
                    .environmentObject(appState)
                    .transition(.move(edge: .trailing))
                    .animation(.default, value: appState.isGameActive)
            } else {
                GameView(difficulity: 1)
                    .transition(.move(edge: .trailing))
                    .animation(.default, value: appState.isGameActive)
            }
        }
    }
}

Here is where the button that switch the view is, with a "withAnimation"

    
    @EnvironmentObject var appState: AppState
    
    var body: some View {
        
        ZStack {
            VStack {
                Spacer()
                Text("Tic Tac Toe")
                    .font(.title)
                    .fontWeight(.bold)
                    .foregroundColor(.indigo)
                    
                Image("MainLogo")
                    .resizable()
                    .frame(width: 150, height: 150)
                Spacer()
                Button("Start") {
                    withAnimation {
                        appState.isGameActive.toggle()
                    }
                }
                .padding()
                .padding(.horizontal, 16.0)
                .background(.indigo)
                .foregroundColor(Color.white)
                .containerShape(RoundedRectangle(cornerRadius: 16))
            .font(.headline)
                Spacer()
            }
        }
        
        
    }
}

CodePudding user response：

Put it condition into animatable container, like

WindowGroup {
  ZStack {          // << here
    if appState.isGameActive == false {
        MenuView()
            .environmentObject(appState)
            .transition(.move(edge: .trailing))
    } else {
        GameView(difficulity: 1)
            .transition(.move(edge: .trailing))
    }
  }
  .animation(.default, value: appState.isGameActive) // << here !!
}

*however I would recommend to separate everything related to views into root view so scene would look like

WindowGroup {
   ContentView()   // << this !!
}