EnterTransition

public sealed class EnterTransition

EnterTransition defines how an AnimatedVisibility Composable appears on screen as it becomes visible. The 4 categories of EnterTransitions available are:

1. fade: fadeIn
2. scale: scaleIn
3. slide: slideIn, slideInHorizontally, slideInVertically
4. expand: expandIn, expandHorizontally, expandVertically

EnterTransition.None can be used when no enter transition is desired. Different EnterTransitions can be combined using plus operator, for example:

Note: fadeIn, scaleIn and slideIn do not affect the size of the AnimatedVisibility composable. In contrast, expandIn will grow the clip bounds to reveal the whole content. This will automatically animate other layouts out of the way, very much like animateContentSize.

Functions

public operator fun plus(enter: EnterTransition): EnterTransition

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

Parameters

Companion Object

Properties

public val None: EnterTransition

This can be used when no enter transition is desired. It can be useful in cases where there are other forms of enter animation defined indirectly for an AnimatedVisibility. e.g.The children of the AnimatedVisibility have all defined their own EnterTransition, or when the parent is fading in, etc.

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