CODEWITHSUNDEEP
swiftswiftui
SCooney
SCooney

Reputation: 160

Transition with a view with SwiftUI without animating the entire view

Using SwiftUI, I have a view that includes a slider that I'm using a transition to slide in from the bottom. All works well, until the slider is moved quickly back and forth. With that, the text field is being animated, and will show "..." when changing from 1 to two digits.

Here is my test code showing this:

struct TestSliderView: View {
    @State private var val: Double = 0
    @State private var showSlider: Bool = false

    var body: some View {
        VStack {
            Button(action: {
                self.showSlider.toggle()
            }) {
                Text("Show Slider")
            }
            Spacer()

            if showSlider {
                JustTheSlider(val: $val)
                    .padding()
                    .transition(.move(edge: .bottom))
                    .animation(.linear(duration: 0.4))
            }
        }
    }
}

struct JustTheSlider: View {
    @Binding var val: Double
    var body: some View {
        VStack {
            Text("Slider")
                .font(.title)
            HStack {
                Text("Value: ")
                    .frame(minWidth: 80, alignment: .leading)
                Slider(value: $val, in: 0...30, step: 1)
                Text("\(Int(val))")
                    .frame(minWidth: 20, alignment: .trailing)
                    .font(Font.body.monospacedDigit())
                    .padding(.horizontal)
            }
        }
    }
}

One way around this would be to remove the .animation(.linear(duration: 0.4)) line and wrap the button action with an animation like so:

            Button(action: {
                withAnimation(.linear(duration: 0.4)) {
                    self.showSlider.toggle()
                }
            }) {
                Text("Show Slider")
            }

This stops the text from animating, but then the view only slides out, and just pops in without any slide animation.

Any ideas?

Upvotes: 1

Views: 3854

Answers (1)

E.Coms
E.Coms

Reputation: 11531

You need animate the state variable, not the View.

 var body: some View {
    VStack {
        Button(action: {
            withAnimation{
                self.showSlider.toggle()}

        }) {
            Text("Show Slider")
        }
        Spacer()

        if showSlider {
            JustTheSlider(val: $val)
                .padding()
                .transition(.move(edge: .bottom))

        }
    }
}

As the last line shown.

Upvotes: 3

Related Questions