How to combine transitions

About 2 min

How to combine transitions 관련

SwiftUI by Example

Back to Home

How to combine transitions | SwiftUI by Example

How to combine transitions

Updated for Xcode 15

When adding or removing a view, SwiftUI lets you combine transitions to make new animation styles using the combined(with:) method.

For example, you can make a view move (one transition) and fade (a second transition) at the same time 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(AnyTransition.opacity.combined(with: .slide))
            }
        }

    }
}

Download this as an Xcode projectopen in new window

To make combined transitions easier to use and re-use, you can create them as extensions on AnyTransition. For example, we could define a custom moveAndScale transition and try it out straight away:

extension AnyTransition {
    static var moveAndScale: AnyTransition {
        AnyTransition.move(edge: .bottom).combined(with: .scale)
    }
}

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(.moveAndScale)
            }
        }
    }
}