UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

How do I animate out a view based on an StateObject change (animating in fine)??

Forums > SwiftUI

My issue is that my SportMenu animates in, as desired, when a button is pressed (and an observed value is toggled) from Home view, but does not animate out, when that same value is toggled from SportMenu. Anyone know why? I want the SportMenu to animate out as a reverse of how it comes in.

Here are the relevant files:

// ContentView.swift

class SportMenuStatus: ObservableObject {
    @Published var isSportMenuShowing = false
    func toggleMenu() {
        if isSportMenuShowing == true {
            isSportMenuShowing = false
        } else {
            isSportMenuShowing = true
        }
    }
}

struct ContentView: View {
    @State private var tab = 0
    @StateObject var isSportMenuShowing = SportMenuStatus()

    var body: some View {
            VStack {
                ZStack {
                    TabView(selection: $tab) {
                        Group {
                            Home(isSportMenuShowing: isSportMenuShowing)

// More code I don't think is relevant

The first tab loads up the Home view which has a button in:

// Home.swift

struct Home: View {
    @ObservedObject var isSportMenuShowing: SportMenuStatus

    var body: some View {
        VStack {
                ZStack {
                    Image("home")
                    .resizable()
                    .aspectRatio(contentMode: .fill)

                    // The Menu button
                    HStack {
                        VStack {
                            Group {
                                Button(action: {
                                    withAnimation {
                                        isSportMenuShowing.toggleMenu()
                                    }
                                }) {
                                    Color(.red)
                                }.frame(width: 200, height: 45)

                                .opacity(0.6)
                            }
                            Spacer()
                        }
                        Spacer()
                    }
                    .offset(x: 10, y: 60)

                    let _ = print(isSportMenuShowing.isSportMenuShowing)
                    if isSportMenuShowing.isSportMenuShowing {
                            SportMenu(isSportMenuShowing: isSportMenuShowing).transition(
                            .asymmetric(
                                insertion: .move(edge: .top),
                                removal: .move(edge: .bottom)
                                                )
                            )
                    }
                }
            Spacer()
        }
    }
}

When that button is clicked, it toggles the Bool in the ContentView which flows the value back into Home and shows the SportMenu() view:

// SportMenu

struct SportMenu: View {
    @ObservedObject var isSportMenuShowing: SportMenuStatus

    var body: some View {
        VStack {
            ZStack {
                Image("sportmenu-no-cross")
                    .resizable()
                    .aspectRatio(contentMode: .fill)

                // Close icon
                VStack {
                    HStack {
                        Spacer()
                        ZStack {
                            Image("close")

                            Button(action: {
                                withAnimation {
                                    isSportMenuShowing.toggleMenu()
                                }
                            }) {
                                Color.red.opacity(0.5)
                            }
                            .frame(width: 50, height: 50)
                        }
                    }
                    Spacer()
                }
                .offset(x: -20, y: 60)
            }
        }
        .edgesIgnoringSafeArea(.top)
    }
}

However, when I click the button in the SportMenu to toggle the value back to false, the SportMenu instantly disappears instead of animating.

How can I get the SportMenu to animate in and out when that value is toggled?

1      

Well, it seems that the issue was something to do with zIndex. For reasons I do not understand, when the view was dismissed, it went behind the view it was on top of.

I solved it by adding .zIndex(1.0) to the end.

1      

Hacking with Swift is sponsored by Essential Developer

SPONSORED Join a FREE crash course for mid/senior iOS devs who want to achieve an expert level of technical and practical skills – it’s the fast track to being a complete senior developer! Hurry up because it'll be available only until April 28th.

Click to save your free spot now

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.