Transition Move to Bottom doesn't respect animation duration

Question

davmans OP

Created Oct ’24

Replies 1

Boosts 1

Participants 1

Hi all,

I’m working on a custom action sheet in SwiftUI that slides in and out from the bottom using .transition(.move(edge: .bottom)). However, I’ve encountered an issue where the transition doesn’t respect my specified animation duration.

Here’s the basic structure of my action sheet:

ZStack {
    Color.black
        .opacity(0.5)

    VStack {
        SomeActionSheetContent()
    }
    .transition(.move(edge: .bottom))
    .zIndex(1)
}

Each button inside the action sheet triggers a dismissal using this code:

Button {
    withAnimation(onDismissAnimation) { isPresented = false }
}

onDismissAnimation can be any Animation, but for demonstration, I’m using .linear(duration: 5).

The problem is that when dismissing the action sheet, the animation is significantly faster than expected, around 5 times faster. For example, a 0.35-second animation finishes in just a fraction of that time.

To investigate further, I tested with .transition(.move(edge: .top)), and in that case, the transition respects the specified animation duration perfectly.

Does anyone know why the transition behaves differently when dismissing to the bottom versus the top?

Boost

Answer 1

davmans OP

Oct ’24

Here's some sample code that everyone can use in Xcode that reproduces the problem:

struct ContentView: View {
    @Binding var isPresented: Bool
    var body: some View {
        ZStack {
            Color.black
                .ignoresSafeArea(edges: .all)
                .opacity(isPresented ? 0.5 : 0)
                .onTapGesture {
                    withAnimation(.linear(duration: 5)) {
                        isPresented = false
                    }
                }


            VStack {
                Button("Show Custom Action Sheet") {
                    withAnimation {
                        isPresented = true
                    }
                }
            }

            if isPresented {
                VStack(spacing: 10) {
                    Spacer()

                    Text("Test")
                    Text("Test 1")
                    Text("Test 2")
                }
                .transition(.move(edge: .bottom))
                .zIndex(1)
            }
        }
    }
}

0