SwiftUI - How to animate button onto screen?

user_5657412 0
Viewed 334

I've got a button in SwiftUI that appears on a view depending on the count of an array, like this:

@State var arr ...

if arr.count > 0 {
  Button("click me!") {
    ...
  }
  .frame(maxHeight: .infinity, alignment: .bottom)
}

I want to animate the button to slide up from the bottom of the screen when the array count goes above 0, rather than it just abruptly appearing on the screen.

I tried the following lines: .transition(.slide) followed by .animation(.spring(), value: arr.count), but these seemingly had no effect. How can I accomplish this animation?

Thank you in advance.

swiftui animation
1 Answers

The modifier .transition() works, you can check it in the example below. Are you sure that you are changing your @State variable using withAnimation { }?

This example slides both buttons up:

struct Example: View {
    
    @State private var array = [0, 1, 2]
    let trigger = 2
    
    var body: some View {
        VStack {
            Button {
                withAnimation {
                    array.append(1)
                }
            } label: {
                Text("Counter \(String(array.count))")
            }
            .padding()
            
            if array.count > trigger {
                Button("Click me!") {
                    print("Do nothing")
                }
                .frame(maxHeight: .infinity, alignment: .bottom)
                .transition(.move(edge: .bottom))
                .padding()
            }
        }
    }

(edited to use array.count as an example, removed transition from first button)

user_182513270
Related