< How to add and remove views with a transition

How to combine transitions

Paul Hudson @twostraws December 1st 2022

Updated for Xcode 14.2

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 project

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

Download this as an Xcode project

How to combine transitions

Similar solutions…