< How to apply multiple animations to a view

How to add and remove views with a transition

Paul Hudson @twostraws October 30th 2019

Updated for Xcode 12.0

You can include or exclude a view in your design just by using a regular Swift condition. For example, this adds or removes some details text when a button is tapped:

struct ContentView: View {
    @State private var showDetails = false

    var body: some View {
        VStack {
            Button(action: {
                withAnimation {
                    self.showDetails.toggle()
                }
            }) {
                Text("Tap to show details")
            }

            if showDetails {
                Text("Details go here.")
            }
        }
    }
}

By default, SwiftUI uses a fade animation to insert or remove views, but you can change that if you want by attaching a transition() modifier to a view.

For example, we could make the details text view slide in or out from the bottom, like this:

Text("Details go here.")
    .transition(.move(edge: .bottom))

There’s also the .slide transition, which causes a view to be animated in from its leading out and animated out on its trailing edge:

Text("Details go here.")
    .transition(.slide)

And the .scale transition, which causes a view to be scaled up from nothing to full size when coming in, then back down to nothing when going out:

Text("Details go here.")
    .transition(.scale)

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

How to add and remove views with a transition

Similar solutions…