Class

EnterExitState

[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()
            )
        }
    }
}