How do I make a transition move leading and move trailing?

Question

I have a "Side-Menu" that I'm implementing in my app, however I have an issue where I can only get the side menu to slide in, but when it's removed from the view, it does an opacity transition. How do I properly set a transition such that it slides in and out from the leading edge?

ZStack {
    VStack {
        Button(action: {
            withAnimation { isShowingMenu.toggle() }
        }, label: {
            Text("Button"
        })
    }
    .offset(x: isShowingMenu ? screenSize: * 0.8 : 0)
    

    if isShowingMenu {
        Rectangle()
            .frame(width: screenSize.width * 0.8)
            .transition( .move(edge: .leading))
    }
}

Notice that when the side-menu appears, it slides in as expected, however when I dismiss the side-menu, it just disappears instead of transitioning out. I made an attempt to use the .asymmetric(...) transition but it does the same thing.

.transition(.asymmetric(insertion: .move(edge: .leading), removal: .move(edge: .trailing)))

A working solution that I am using currently is to instead offset, off the screen, and bring it back when the value changes, without the condition; However, I still believe a transition should work in this instance.

Rectangle()
    .frame(width: screenSize.width * 0.8)
    .offset(x: baseVM.menuShowing ? 0 : (screenSize.width * 0.8) * -1)

Answer 1

You might be missing a withAnimationin the Button toggle. And be aware: Transition does not correctly show in preview, but in Simulator its fine.

        ZStack(alignment: .leading) {
            VStack {
                Button(action: {
                    withAnimation { // here
                        isShowingMenu.toggle()
                    }
                }, label: {
                    Text("Button")
                })
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding()

            }
            .offset(x: isShowingMenu ? 200 : 0)
            
            if isShowingMenu {
                Rectangle()
                    .frame(width: 200, alignment: .leading)
                    .transition( .move(edge: .leading))
            }
        }