如何删除 Jetpack Compose Navigation 中的默认过渡

Question

I'm using the following sippet of code to navigate from a composable to another one, but it has a default fade animation. How can I remove it? I tried using an empty anim resource but it doesn't work.

navHostController.navigate(
    "destination_route",
    navOptions {
        popUpTo("this_route") {
            inclusive = true
        }
        anim {
            enter = R.anim.empty_animation
            exit = R.anim.empty_animation
            popEnter = R.anim.empty_animation
            popExit = R.anim.empty_animation
        }
    }
)

R.anim.empty_animation:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--Empty to disable animation-->
</set>

Answer 1

Currently, there is no way to configure the animations in the NavHost offered by Navigation-Compose's current version (2.4.0-beta02).

 @Composable public fun NavHost( navController: NavHostController, graph: NavGraph, modifier: Modifier = Modifier ) { val backStackEntry = visibleTransitionsInProgress.lastOrNull()?: visibleBackStack.lastOrNull() var initialCrossfade by remember { mutableStateOf(true) } if (backStackEntry,= null) { // while in the scope of the composable. we provide the navBackStackEntry as the // ViewModelStoreOwner and LifecycleOwner Crossfade(backStackEntry,id, modifier) { //// <<----- this

As Crossfade is not configurable, the transition cannot be changed.

To change the animation, you have to abandon using the NavHost provided by Navigation-Compose.

Answer 2

As of right now, as EpicPandaForce said it is not possible, but that is because it is in the works!

Currently this functionality is served under accompanist, in the accompanist-navigation-animation artifact. You can read more about it here or in a more detailed blogpost here where they talk a bit about the future of it too.

The gist of it is that with that dependency (and without it when it eventually gets merged to the normal navigation-compose library) you will be able to write something like this:

composable(
  "profile/{id}",
  enterTransition = { _, _ ->
    // Whatever EnterTransition object you want, like:
    fadeIn(animationSpec = tween(2000))
  }
) { // Content }