EnterExitState

public enum class EnterExitState

EnterExitState contains the three states that are involved in the enter and exit transition of AnimatedVisibility. More specifically, PreEnter and Visible defines the initial and target state of an enter transition, whereas Visible and PostExit are the initial and target state of an exit transition.

See blow for an example of custom enter/exit animation in AnimatedVisibility using Transition<EnterExitState> (i.e. AnimatedVisibilityScope.transition):

Code Examples

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