Jetpack Navigation Compose使用NavHost时过渡动画异常问题

问题现象 #

在使用Navigation Compose的NavHost组件实现页面过渡动画时，偶尔会出现动画异常（比如动画卡顿、错位或不生效），但使用AnimatedContent实现完全相同的过渡逻辑时，未出现类似问题。

环境版本 #

• Navigation Compose: 2.8.0-alpha05
• Compose UI: 1.7.0-beta04
• Kotlin: 2.0.0

代码示例 #

NavHost 实现代码 #

@Composable
fun MainNavHost(navController: NavHostController) {
    NavHost(
        navController = navController,
        startDestination = "home",
        enterTransition = { slideInHorizontally(initialOffsetX = { it }) },
        exitTransition = { slideOutHorizontally(targetOffsetX = { -it }) }
    ) {
        composable("home") {
            HomeScreen(onNavigateToDetail = { navController.navigate("detail") })
        }
        composable("detail") {
            DetailScreen(onBack = { navController.popBackStack() })
        }
    }
}

AnimatedContent 对比实现代码 #

@Composable
fun AnimatedScreenSwitcher(currentScreen: String, onScreenChange: (String) -> Unit) {
    AnimatedContent(
        targetState = currentScreen,
        transitionSpec = {
            slideInHorizontally(initialOffsetX = { it }) with
                    slideOutHorizontally(targetOffsetX = { -it })
        }
    ) { screen ->
        when (screen) {
            "home" -> HomeScreen(onNavigateToDetail = { onScreenChange("detail") })
            "detail" -> DetailScreen(onBack = { onScreenChange("home") })
        }
    }
}

异常演示 #

排查与解决建议 #

1. 版本兼容性问题：你使用的Navigation Compose是alpha预发布版本，这类版本本身可能存在未修复的动画相关bug。建议尝试降级到Navigation Compose的稳定版本（如2.7.7），同时保持Compose UI和Kotlin版本的兼容性，验证异常是否消失。
2. 过渡配置冲突：检查是否在composable路由中单独设置了enterTransition/exitTransition，导致全局过渡和局部过渡逻辑冲突。统一过渡配置，避免重复定义。
3. 状态重组干扰：确认页面组件中是否存在频繁的不必要重组，可能干扰NavHost的动画执行。使用remember、derivedStateOf等API优化组件状态，减少无意义重组。
4. 跟踪官方更新：关注Jetpack Navigation的官方更新日志，查看后续版本是否修复了类似动画异常问题。

内容的提问来源于stack exchange，提问作者Kirk Lee