[FIXED] Why is my AnimatedContent not showing actual animation with Jetpack Compose?

Issue

I'm using AnimatedContent to animate between two different views but even though I'm specifying I want to use vertical transitions, it's still switching between the view but not applying the actual transition animation. Here's the code:

val isEditState = remember { mutableStateOf(false) }

AnimatedContent(
     targetState = isEditState,
     transitionSpec = {
          (slideInVertically() with slideOutVertically()).using(SizeTransform(clip = false))
     }
) { targetState ->
     if (targetState.value) {
          EditView(...)
     } else {
          NonEditView(...)
     }
}

How can I fix this so the animation works?

If I use AnimatedVisibility it does work but I have to apply it to each view specifically.

AnimatedVisibility(
        visible = isEditState.value,
        enter = slideInVertically(),
        exit = slideOutVertically(),
        content = EditView(...)
    )

Solution

Try using isEditable.value as the target state:

AnimatedContent(
     targetState = isEditState.value,
     transitionSpec = {
          (slideInVertically() with slideOutVertically()).using(SizeTransform(clip = false))
     }
) { targetState ->
     if (targetState) {
          EditView(...)
     } else {
          NonEditView(...)
     }
}

The variable isEditable (which is a State) doesn't change, that's why it doesn't animate. What changes is its value.

Answered By - cd1
Answer Checked By - Marie Seifert (JavaFixing Admin)