Greetings, traveler!

SwiftUI gets a new built-in navigation transition in iOS 27: NavigationTransition.crossFade. It is a navigation transition that cross-fades between the appearing view and the disappearing view.

The declaration is simple:

static var crossFade: CrossFadeNavigationTransition

static var crossFade: CrossFadeNavigationTransition

You apply it with the existing navigationTransition(_:) modifier:

.navigationTransition(.crossFade)

.navigationTransition(.crossFade)

Where it fits

crossFade belongs to NavigationTransition, not to the regular Transition API.

That distinction matters. A regular transition describes how a view is inserted into or removed from a view hierarchy. A navigation transition describes the transition used when navigating to a view.

So this is closer to .navigationTransition(.zoom(...)) than to .transition(.opacity). The difference is that zoom needs a source ID and namespace, while crossFade does not.

Using it with a sheet

Apple mentions a sheet use case in the SwiftUI updates: specify the crossFade transition to have a sheet appear by fading in over content.

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

    var body: some View {
        Button("Show Sheet") {
            showSheet = true
        }
        .sheet(isPresented: $showSheet) {
            SheetContentView()
                .navigationTransition(.crossFade)
        }
    }
}

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

    var body: some View {
        Button("Show Sheet") {
            showSheet = true
        }
        .sheet(isPresented: $showSheet) {
            SheetContentView()
                .navigationTransition(.crossFade)
        }
    }
}

Final thoughts

NavigationTransition.crossFade is a small addition, but a useful one. It gives SwiftUI a system-provided fade transition for navigation and presentation contexts.