{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

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:

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideIn
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOut
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

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

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.

See also
fadeOut
scaleOut
slideOut
slideOutHorizontally
slideOutVertically
shrinkOut
shrinkHorizontally
shrinkVertically
AnimatedVisibility

Summary

Nested types

public static class ExitTransition.Companion

Protected constructors

Public methods

boolean
equals(Object other)
int
final @NonNull ExitTransition

Combines different exit transitions.

@NonNull String

Protected constructors

ExitTransition

protected ExitTransition()

Public methods

equals

public boolean equals(Object other)

hashCode

public int hashCode()

plus

public final @NonNull ExitTransition plus(@NonNull ExitTransition exit)

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.

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.expandVertically
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleIn
import androidx.compose.animation.scaleOut
import androidx.compose.animation.shrinkVertically
import androidx.compose.animation.slideIn
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOut
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.TransformOrigin
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }
AnimatedVisibility(
    visible = visible,
    enter = slideInVertically(
        // Start the slide from 40 (pixels) above where the content is supposed to go, to
        // produce a parallax effect
        initialOffsetY = { -40 }
    ) + expandVertically(
        expandFrom = Alignment.Top
    ) + scaleIn(
        // Animate scale from 0f to 1f using the top center as the pivot point.
        transformOrigin = TransformOrigin(0.5f, 0f)
    ) + fadeIn(initialAlpha = 0.3f),
    exit = slideOutVertically() + shrinkVertically() + fadeOut() + scaleOut(targetScale = 1.2f)
) {
    // Content that needs to appear/disappear goes here:
    Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp))
}
Parameters
@NonNull ExitTransition exit

another ExitTransition to be combined.

toString

public @NonNull String toString()