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