This will slide the content left/right with some fading in/out as the navigation keys are navigated.
Second, we need to update our NavigatorConfig to add the transition:
val navigator = rememberNavigator {
// Provide a default transition between all keys
defaultTransition { -> MaterialSharedAxisTransitionX }
// Provide a transtion based on what the previous key and the new key are.
// Add some logic, this returns EnterExitTransition.
defaultTransition { previousKey, newKey, isPop ->
if (isPop) {
MaterialSharedAxisTransitionX.popEnterExit
} else {
MaterialSharedAxisTransitionX.enterExit
}
}
// Key transitions
keyTransition<MySpecificKey> { -> CrossFadeTransition }
// Node transitions
nodeTransition<Screen> { -> MaterialSharedAxisTransitionX }
nodeTransition<BottomSheet> { -> CrossFadeTransition }
nodeTransition<Dialog> { -> VerticalSlideTransition }
}
Overriding transitions
We can override a specific transition before we set a backstack, for specific cases where we need to simply override a single setBackstack 's transition.
To do so we can use overrideTransition:
// Override the next Screen transition
navigator.overrideTransition<Screen>(CrossFadeTransition)
navigator.setBackstack(..)
// Override the next BottomSheet transition
navigator.overrideTransition<BottomSheet>(VerticalSlideTransition)
navigator.setBackstack(..)
// Override the next Dialogtransition
navigator.overrideTransition<Dialog>(MaterialSharedAxisTransitionX)
navigator.setBackstack(..)
Animating elements with navigation transitions
All navigation nodes are animated within an AnimatedContent which provides an AnimatedVisibilityScope. We can gain access to that scope in our Composables using NavigationVisibilityScope:
@Composable
fun HomeScreen() {
NavigationVisibilityScope {
Text(
text = "I animate with the navigation transition",
modifier = Modifier
.animateEnterExit(
enter = slideInVertically { it * 3 } + fadeIn(),
exit = slideOutVertically { it } + fadeOut()
)
)
}
}