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)))
            }
        }
    }
}

Download this as an Xcode project

Similar solutions…

How to combine transitions | SwiftUI by Example

---

How to combine transitions

How to create a custom transition | SwiftUI by Example

---

How to create a custom transition

How to create and compose custom views | SwiftUI by Example

---

How to create and compose custom views

Composing views to create a list row | SwiftUI by Example

---

Composing views to create a list row

How to create modifiers for a UIViewRepresentable struct | SwiftUI by Example

---

How to create modifiers for a UIViewRepresentable struct