[EnterExitState] contains the three states that are involved in the enter and exit transition of [AnimatedVisibility].
AnimatedVisibilityWithBooleanVisibleParamNoReceiver
@OptIn(ExperimentalAnimationApi::class)
@Composable
fun AnimatedVisibilityWithBooleanVisibleParamNoReceiver() {
var visible by remember { mutableStateOf(true) }
Box(modifier = Modifier.clickable { visible = !visible }) {
AnimatedVisibility(
visible = visible,
modifier = Modifier.align(Alignment.Center),
enter = fadeIn(),
exit = fadeOut(animationSpec = tween(200)) + scaleOut(),
) { // Content that needs to appear/disappear goes here:
// Here we can optionally define a custom enter/exit animation by creating an animation
// using the Transition<EnterExitState> object from AnimatedVisibilityScope:
// As a part of the enter transition, the corner radius will be animated from 0.dp to
// 50.dp.
val cornerRadius by
transition.animateDp {
when (it) {
EnterExitState.PreEnter -> 0.dp
EnterExitState.Visible -> 50.dp
// No corner radius change when exiting.
EnterExitState.PostExit -> 50.dp
}
}
Box(
Modifier.background(Color.Red, shape = RoundedCornerShape(cornerRadius))
.height(100.dp)
.fillMaxWidth()
)
}
}
}