Google is committed to advancing racial equity for Black communities. See how.

ExitTransition

@Immutable sealed class ExitTransition
kotlin.Any
   ↳ androidx.compose.animation.ExitTransition

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

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

They can be combined using plus operator, for example:

import androidx.compose.animation.AnimatedVisibility
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.slideInHorizontally
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

var visible by remember { mutableStateOf(true) }
AnimatedVisibility(
    visible = visible,
    enter = slideInHorizontally(
        // Offsets the content by 1/3 of its width to the left, and slide towards right
        initialOffsetX = { fullWidth -> -fullWidth / 3 },
        // Overwrites the default animation with tween for this slide animation.
        animSpec = tween(durationMillis = 200)
    ) + fadeIn(
        // Overwrites the default animation with tween
        animSpec = tween(durationMillis = 200)
    ),
    exit = slideOutHorizontally(
        // Overwrites the ending position of the slide-out to 200 (pixels) to the right
        targetOffsetX = { 200 },
        animSpec = spring(stiffness = Spring.StiffnessHigh)
    ) + fadeOut()
) {
    // Content that needs to appear/disappear goes here:
    Box(Modifier.fillMaxWidth().height(200.dp)) {}
}
Note: fadeOut and slideOut do not affect the size of the AnimatedVisibilitycomposable. In contrast, shrinkOut (and shrinkHorizontally, shrinkVertically) will shrinkthe clip bounds to reveal less and less of the content. This will automatically animate otherlayouts to fill in the space, very much like animateContentSize.

Summary

Public methods
operator ExitTransition

Combines different exit transitions.

Public methods

plus

@Stable 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.

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.expandVertically
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.shrinkVertically
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

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
    ) + fadeIn(initialAlpha = 0.3f),
    exit = slideOutVertically() + shrinkVertically() + fadeOut()
) {
    // Content that needs to appear/disappear goes here:
    Text("Content to appear/disappear", Modifier.fillMaxWidth().height(200.dp))
}
Parameters
exit: ExitTransition another ExitTransition to be combined.