How it works
CrossFadeNavigationTransition is a concrete NavigationTransition that dissolves one view into the next during a push or pop, rather than sliding it in from the edge. Use it when you want a navigation change to feel like a soft swap of content in place — for detail screens, media, or hierarchies where the default horizontal slide would be too literal. You rarely name the type directly; instead you apply it through the .fade(.cross) factory on the destination view, and SwiftUI drives the cross-fade as part of the standard navigation animation.
Attach the transition with navigationTransition(_:)
The transition is applied as a view modifier on the destination, not on the container. Adding
.navigationTransition(.fade(.cross))to a view tells SwiftUI to use a CrossFadeNavigationTransition whenever that view is pushed or popped within the enclosing navigation hierarchy.Select the cross fade via .fade(.cross)
CrossFadeNavigationTransition is vended through the
.fadestyle configured with the.crossoption. The.crossvalue selects the cross-dissolve behavior, where the outgoing and incoming views blend over one another, so you express intent with a value rather than constructing the struct yourself.Place it on the destination, not the link
The modifier belongs to the view that is being navigated to, so it travels with that screen. Here it sits on the
Text("Sunflower Detail")destination of theNavigationLink, meaning the cross-fade plays each time that detail is presented and dismissed.Let the navigation container drive the animation
CrossFadeNavigationTransition only takes effect inside a navigation hierarchy that manages push and pop. The surrounding
NavigationStack(with itsListandNavigationLink) supplies the navigation events, and the transition substitutes its cross-fade for the platform's default slide on those events.
.navigationTransition(.fade(.cross)) to the default by removing the modifier from Text("Sunflower Detail"), then push the link again to compare the standard horizontal slide against the cross-fade.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct CrossFadeNavigationTransitionDemo: View {
var body: some View {
NavigationStack {
List {
NavigationLink("Sunflower") {
Text("Sunflower Detail")
.font(.largeTitle)
.navigationTransition(.fade(.cross))
}
}
.navigationTitle("Flowers")
}
.padding()
}
}