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

user_12533533 0
Viewed 85

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(...)
    )
android-jetpack-compose android
2 Answers

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.

user_383330

I think your error is actually in using

val isEditState = remember { mutableStateOf(false) }

rather than

val isEditState by remember { mutableStateOf(false) }

If you update that to match the standard usage of remember, I think the rest of the solution will fall into place:

val isEditState by remember { mutableStateOf(false) }

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