ExitTransition

public sealed class ExitTransition

ExitTransition defines how an AnimatedVisibility Composable disappears on screen as it becomes not visible. The 4 categories of ExitTransition available are:

1. fade: fadeOut
2. scale: scaleOut
3. slide: slideOut, slideOutHorizontally, slideOutVertically
4. shrink: shrinkOut, shrinkHorizontally, shrinkVertically

ExitTransition.None can be used when no exit transition is desired. Different ExitTransitions can be combined using plus operator, for example:

Note: fadeOut and slideOut do not affect the size of the AnimatedVisibility composable. In contrast, shrinkOut (and shrinkHorizontally, shrinkVertically) will shrink the clip bounds to reveal less and less of the content. This will automatically animate other layouts to fill in the space, very much like animateContentSize.

Functions

public operator fun plus(exit: ExitTransition): ExitTransition

Combines different exit transitions. The order of the ExitTransitions being combined does not matter, as these ExitTransitions will start simultaneously. The order of applying transforms from these exit transitions (if defined) is: alpha and scale first, shrink or expand, then slide.

Parameters

Companion Object

Properties

public val None: ExitTransition

This can be used when no built-in ExitTransition (i.e. fade/slide, etc) is desired for the AnimatedVisibility, but rather the children are defining their own exit animation using the Transition scope.

Note: If None is used, and nothing is animating in the Transition scope that AnimatedVisibility provided, the content will be removed from AnimatedVisibility right away.

Code Examples

SlideTransition

@Composable
fun SlideTransition() {
    var visible by remember { mutableStateOf(true) }
    AnimatedVisibility(
        visible = visible,
        enter =
            slideInHorizontally(animationSpec = tween(durationMillis = 200)) { fullWidth ->
                // Offsets the content by 1/3 of its width to the left, and slide towards right
                // Overwrites the default animation with tween for this slide animation.
                -fullWidth / 3
            } +
                fadeIn(
                    // Overwrites the default animation with tween
                    animationSpec = tween(durationMillis = 200)
                ),
        exit =
            slideOutHorizontally(animationSpec = spring(stiffness = Spring.StiffnessHigh)) {
                // Overwrites the ending position of the slide-out to 200 (pixels) to the right
                200
            } + fadeOut(),
    ) {
        // Content that needs to appear/disappear goes here:
        Box(Modifier.fillMaxWidth().requiredHeight(200.dp)) {}
    }
}