Simple Animation with Jetpack Compose | Animation run unexpected way

[Jaehwa-Noh]

URL of codelab Codelab

In which task and step of the codelab can this issue be found? 7 (Optional) Experiment with other animations - 3

Describe the problem Background color animation does not work I'd expected.

Steps to reproduce?

1. Go to...
2. Click on...
3. See error...

Versions Android Studio version: Android Studio Giraffe 2022.3.1 Patch 4 API version of the emulator: 34

Additional information Include screenshots if they would be useful in clarifying the problem.

Suggestion

Need to change modifier chain order. This code change

 Card(modifier = modifier) {
        Column(
            modifier = Modifier
                .animateContentSize(
                    animationSpec = spring(
                        dampingRatio = Spring.DampingRatioNoBouncy,
                        stiffness = Spring.StiffnessMedium
                    )
                )
                .background(color = color)   // <----
        ) { }

to this.

 Card(modifier = modifier) {
        Column(
            modifier = Modifier
                .background(color = color)   // <----
                .animateContentSize(
                    animationSpec = spring(
                        dampingRatio = Spring.DampingRatioNoBouncy,
                        stiffness = Spring.StiffnessMedium
                    )
                )
        ) { }

Result