从详情页返回时CardView边框于共享元素动画结束后延迟显示问题

我正尝试在应用示例中实现共享Transition元素动画，相关代码如下：

with(sharedTransitionScope) {
    val roundedCornerAnimation by animatedVisibilityScope.transition
        .animateDp(label = "rounded corner") { enterExit: EnterExitState ->
            when (enterExit) {
                EnterExitState.PreEnter -> 0.dp
                EnterExitState.Visible -> TMDb_8_dp
                EnterExitState.PostExit -> TMDb_8_dp
            }
        }
    Card(
        shape = RoundedCornerShape(roundedCornerAnimation),
        modifier = modifier
            .sharedBounds(
                sharedContentState = rememberSharedContentState(
                    key = TMDbSharedElementKey(
                        tmdbId = movie.id,
                        type = TMDbSharedElementType.Bounds
                    )
                ),
                animatedVisibilityScope = animatedVisibilityScope,
                boundsTransform = TMDbDetailBoundsTransform,
                clipInOverlayDuringTransition = OverlayClip(
                    RoundedCornerShape(
                        roundedCornerAnimation
                    )
                ),
                enter = fadeIn(),
                exit = fadeOut()
            )
)

问题：从详情页返回时，Card的边框会延迟显示，但Google的JetSnack示例应用不存在该问题，请问我遗漏了什么配置？

解决方案 #

1. 补全圆角动画的退出状态处理
   你的代码未处理EnterExitState.Exit状态，导致退出详情页时圆角无法从TMDb_8_dp过渡回初始值，进而引发边框显示延迟。修改动画逻辑，让Exit和PostExit状态都返回0.dp，保证退出过程中圆角与共享动画同步：

   val roundedCornerAnimation by animatedVisibilityScope.transition
       .animateDp(label = "rounded corner") { enterExit: EnterExitState ->
           when (enterExit) {
               EnterExitState.PreEnter -> 0.dp
               EnterExitState.Visible -> TMDb_8_dp
               EnterExitState.Exit -> 0.dp
               EnterExitState.PostExit -> 0.dp
           }
       }
   

2. 同步BoundsTransform的形状过渡
   检查TMDbDetailBoundsTransform是否在过渡过程中同步了圆角的变化。JetSnack示例中会在BoundsTransform内关联形状动画，确保共享元素的裁剪区域与实际组件形状完全匹配，避免视觉错位。

3. 确认共享元素Key一致性
   保证列表页与详情页使用的TMDbSharedElementKey完全一致（包括tmdbId和type字段），否则共享动画无法正确匹配元素，导致状态不同步。

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