Unable to animate views in SwiftUI Xcode 13.1

Question

I'm a bit stumped at the moment, since I can't for the life of me figure out why my view isn't being animated in and out of a view.

I'm currently using Xcode 13.1 & SwiftUI 3.0. I'm currently trying to animate a view sliding up from the bottom when we set a state property to true and when this property is set to false, the view will slide down and be removed from the view.

Nothing crazy it seems pretty simple/straightforward to me, but for some reason when I change the state property I don't get animation at all which is strange.

I feel like the WindowGroup may be the issue, but I can't put my finger on why this would be affecting the animation.

Below is the code that I'm currently using and isn't working as well as the gif showing the behavior I'm currently getting.

import SwiftUI

@main
struct MainApp: App {
    
    @State private var showCard = false
    
    var body: some Scene {
        WindowGroup {
                TabView {
                    Button("Show Card") {
                        withAnimation(.easeInOut(duration: 1)) {
                            showCard.toggle()
                        }
                    }
                    .tabItem {
                        Image.docViewFinder
                        Text("scan",
                             tableName: LocalisationTable.misc)
                    }
                    Text("Breakdowns")
                        .tabItem {
                            Image.stack
                            Text("breakdowns",
                                 tableName: LocalisationTable.misc)
                        }
                    Text("Home")
                        .tabItem {
                            Image.people
                            Text("people",
                                 tableName: LocalisationTable.misc)
                        }
                    Text("Home")
                        .tabItem {
                            Image.gear
                            Text("settings",
                                 tableName: LocalisationTable.misc)
                        }
                }
                .accentColor(.blue)
                .overlay(alignment: .bottom) {
                    if showCard {
                        Rectangle()
                            .edgesIgnoringSafeArea(.all)
                            .transition(.move(edge: .bottom))
                            .animation(.linear(duration: 1), value: showCard)
                            .frame(maxWidth: .infinity,
                                   maxHeight: 250)
                   }
                }
        }
    }
}

Answer 1

remove if and use offset

.overlay(alignment: .bottom) {

   Rectangle()
      .edgesIgnoringSafeArea(.all)
      .transition(.move(edge: .bottom))
      .animation(.linear(duration: 1), value: showCard)
      .frame(maxWidth: .infinity,
           maxHeight: 250)
      .offset(x: 0, y: showCard ? 250:0) //This
}