I have a text which need to be animated to show and hide with the value is null or not. it would have been straight forward if the visibility is separately handle, but this is what I got. In the bellow code the enter animation works but the exit animation dont as the text value is null. I can think of something with remembering the old value but not sure how.
@Composable
fun ShowAnimatedText(
text : String?
) {
Column(
modifier = Modifier.fillMaxWidth()
) {
AnimatedVisibility(
visible = text != null,
enter = fadeIn(animationSpec = tween(2000)),
exit = fadeOut(animationSpec = tween(2000))
) {
text?.let {
Text(text = it)
}
}
}
}
I think the fade-out animation is actually working "per-se".
I suspect the parameter
text: String?
is a value coming from a hoisted "state" somewhere up aboveShowAnimatedText
, and since you are directly observing it inside the animating scope, when you change it to null it instantly removes theText
composable, and your'e not witnessing a slow fade out.This is my attempt completing your snippet based on my assumption and making it work, the fade-in works, but the desired fade-out is instantly happening.
You can solve it by modifying the
text
to a non-state value and change your visibility logic from using a nullability check to some "business logic" that would require it to bevisible
orhidden
, modifying the codes above like this.