How to create asymmetric transitions

About 1 min

How to create asymmetric transitions 관련

SwiftUI by Example

Back to Home

How to create asymmetric transitions | SwiftUI by Example

How to create asymmetric transitions

Updated for Xcode 15

SwiftUI lets us specify one transition when adding a view and another when removing it, all done using the asymmetric() transition type.

For example, we can create a text view that uses asymmetric transitions so that it moves in from the leading edge when added and moves down to the bottom edge when being removed, like this:

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

    var body: some View {
        VStack {
            Button("Press to show details") {
                withAnimation {
                    showDetails.toggle()
                }
            }

            if showDetails {
                Text("Details go here.")
                    .transition(.asymmetric(insertion: .move(edge: .leading), removal: .move(edge: .bottom)))
            }
        }
    }
}