Jetpack Compose：如何让AnimatedContent的进入退出过渡顺序执行？

要让初始状态完全淡出后再淡入目标状态，只需要把原来的togetherWith替换成then函数即可——then的作用就是让前后两个动画按顺序执行：先完成前一个动画（淡出），再启动后一个动画（淡入）。

修改后的示例代码如下：

AnimatedContent(
    targetState = animationState,
    transitionSpec = {
        // 先执行淡出动画，完成后再执行淡入动画
        fadeOut(tween(durationMillis = FadeOutMillis, easing = LinearEasing)) then
            fadeIn(tween(durationMillis = FadeInMillis, easing = LinearEasing))
    }
) { targetState ->
    // 这里是目标状态对应的UI内容
    ...
}

需要注意的两点：

• 调整动画顺序：必须把fadeOut放在then前面，确保先执行淡出操作
• 两个动画的时长可以独立设置，根据需求调整各自的durationMillis参数

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