Jetpack Compose普通导航为何出现淡入淡出动画？

页面切换时意外出现淡入淡出动画，是因为Compose Navigation在部分场景下会自动应用默认过渡动画。要彻底移除这些不符合预期的动画，只需在每个composable路由中显式禁用过渡配置：

修改后的MainActivity代码 #

setContent {
    GrooveShareTheme {
        val navController = rememberNavController()
        NavHost(
            navController = navController,
            startDestination = "auth"
        ) {
            navigation(
                startDestination = "signup",
                route = "auth"
            ) {
                composable(
                    route = "signup",
                    enterTransition = { null },
                    exitTransition = { null },
                    popEnterTransition = { null },
                    popExitTransition = { null }
                ) { SignUpScreen(navController, spotifyAuthViewModel) }
                composable(
                    route = "login",
                    enterTransition = { null },
                    exitTransition = { null },
                    popEnterTransition = { null },
                    popExitTransition = { null }
                ) { LogInScreen(navController) }
                composable(
                    route = "password_reset",
                    enterTransition = { null },
                    exitTransition = { null },
                    popEnterTransition = { null },
                    popExitTransition = { null }
                ) { PasswordResetScreen(navController) }
            }
            navigation(
                startDestination = "home",
                route = "main"
            ) {
                composable(
                    route = "home",
                    enterTransition = { null },
                    exitTransition = { null },
                    popEnterTransition = { null },
                    popExitTransition = { null }
                ) { HomeScreen(navController) }
                composable(
                    route = "friends",
                    enterTransition = { null },
                    exitTransition = { null },
                    popEnterTransition = { null },
                    popExitTransition = { null }
                ) { FriendsScreen(navController) }
                composable(
                    route = "add",
                    enterTransition = { null },
                    exitTransition = { null },
                    popEnterTransition = { null },
                    popExitTransition = { null }
                ) { AddScreen(navController, currentlyPlayingTrack) }
                composable(
                    route = "notifications",
                    enterTransition = { null },
                    exitTransition = { null },
                    popEnterTransition = { null },
                    popExitTransition = { null }
                ) { NotificationsScreen(navController) }
                composable(
                    route = "profile",
                    enterTransition = { null },
                    exitTransition = { null },
                    popEnterTransition = { null },
                    popExitTransition = { null }
                ) { ProfileScreen(navController, spotifyUserViewModel) }
            }
        }
    }
}

简化方案：创建扩展函数 #

如果需要给所有路由统一禁用动画，可以定义一个扩展函数减少重复代码：

fun NavGraphBuilder.composableNoAnimation(
    route: String,
    content: @Composable (NavBackStackEntry) -> Unit
) {
    composable(
        route = route,
        enterTransition = { null },
        exitTransition = { null },
        popEnterTransition = { null },
        popExitTransition = { null },
        content = content
    )
}

之后在NavHost中直接使用composableNoAnimation替代composable即可：

composableNoAnimation("signup") { SignUpScreen(navController, spotifyAuthViewModel) }

额外检查点 #

如果修改后仍有动画，检查你的GrooveShareTheme中是否设置了默认导航过渡属性，移除相关配置即可。

内容的提问来源于stack exchange，提问作者dimitris.terzz