如何使用Jetpack Compose的AnimatedVisibility仅触发一次可见性动画？

问题根源 #

你当前的代码中，state.targetState = true直接写在Composable的重组代码块里——每次页面重组（包括从其他页面返回、屏幕旋转等配置变更）时，这条语句都会被执行，强制将目标状态设为true。而MutableTransitionState会检测到状态变更（哪怕当前状态已经是true，重复赋值仍可能触发过渡逻辑），最终导致动画反复执行。

解决方案 #

以下是两种可靠的实现方式，确保动画仅执行一次：

方法一：使用LaunchedEffect仅初始化一次状态

借助LaunchedEffect的特性，让状态变更仅在Composable首次进入组合时执行：

val state = remember {
    MutableTransitionState(false)
}
// 仅在Composable首次初始化时执行一次状态切换
LaunchedEffect(Unit) {
    state.targetState = true
}
AnimatedVisibility(
    visibleState = state,
    enter = slideInHorizontally(
        animationSpec = tween(
            durationMillis = 250,
            delayMillis = animationDelay
        ),
        initialOffsetX = { screenWidthPx }
    )
) {
    content()
}

LaunchedEffect(Unit)的key为Unit，意味着这个协程只会在Composable首次加载时启动，后续重组不会重复执行，因此targetState只会被设置一次，动画自然仅触发一次。

方法二：用rememberSaveable记录动画执行状态

通过一个持久化的标记，记录动画是否已经执行过，避免重复触发：

// 用rememberSaveable确保配置变更时标记不丢失
val hasAnimated = rememberSaveable { mutableStateOf(false) }
val state = remember {
    MutableTransitionState(false)
}

if (!hasAnimated.value) {
    state.targetState = true
    hasAnimated.value = true
}

AnimatedVisibility(
    visibleState = state,
    enter = slideInHorizontally(
        animationSpec = tween(
            durationMillis = 250,
            delayMillis = animationDelay
        ),
        initialOffsetX = { screenWidthPx }
    )
) {
    content()
}

rememberSaveable会在配置变更（如屏幕旋转）时保留标记值，从其他页面返回时也不会重置这个标记，因此无论页面如何重组，动画都只会执行一次。

补充说明 #

如果后续需要在特定条件下重新触发动画，可以修改LaunchedEffect的key为对应的触发条件，或者调整hasAnimated的重置逻辑——但如果只需要首次启动时执行一次动画，上述两种方法都能满足需求。

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