# ExitTransition

Artifact: [androidx.compose.animation:animation](https://developer.android.com/jetpack/androidx/releases/compose-animation) [View Source](https://cs.android.com/search?q=file:androidx/compose/animation/EnterExitTransition.kt+class:androidx.compose.animation.ExitTransition) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.0.0) Common/AllAndroid/JVM
- Cmn

  ```
  sealed class ExitTransition
  ```

*** ** * ** ***

`https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` defines how an `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` Composable disappears on screen as it becomes not visible. The 4 categories of `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` available are:

1. fade: `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)`

2. scale: `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#scaleOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin)`

3. slide: `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOutHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOutVertically(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)`

4. shrink: `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean,kotlin.Function1)`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkVertically(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Function1)`

`https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition#None()` can be used when no exit transition is desired. Different `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`s can be combined using plus operator, for example:

```kotlin
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** : `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` do not affect the size of the `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable. In contrast, `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` (and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean,kotlin.Function1)`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkVertically(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Function1)`) 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 `https://developer.android.com/reference/kotlin/androidx/compose/animation/animateContentSize.modifier#(androidx.compose.ui.Modifier).animateContentSize(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function2)`.

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#scaleOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float,androidx.compose.ui.graphics.TransformOrigin)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOutHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#slideOutVertically(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkHorizontally(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Horizontal,kotlin.Boolean,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkVertically(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |   |

## Summary

| ### Public companion properties |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition#None()` This can be used when no built-in `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` (i.e. fade/slide, etc) is desired for the `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`, but rather the children are defining their own exit animation using the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition` scope. | Cmn |

| ### Protected constructors |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition#ExitTransition()()` | Cmn |

| ### Public functions |
|---|---|---|
| `open operator https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition#equals(kotlin.Any)(other: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?)` | Cmn |
| `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition#hashCode()()` | Cmn |
| `operator https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition#plus(androidx.compose.animation.ExitTransition)(exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition)` Combines different exit transitions. | Cmn |
| `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition#toString()()` | Cmn |

| ### Public properties |
|---|---|---|
| `abstract https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterExitTransitionConfig` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition#config()` The underlying transition configuration containing the specs for fade, slide, scale, shrink, and veil animations. | Cmn |

## Public companion properties

### None

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.0.0)

```
val None: ExitTransition
```

This can be used when no built-in `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` (i.e. fade/slide, etc) is desired for the `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`, but rather the children are defining their own exit animation using the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition` scope.

**Note:** If `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition#None()` is used, and nothing is animating in the Transition scope that `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` provided, the content will be removed from `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` right away.

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.AnimatedVisibilityScope
import androidx.compose.animation.EnterExitState
import androidx.compose.animation.ExitTransition
import androidx.compose.animation.core.MutableTransitionState
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.tween
import androidx.compose.animation.expandVertically
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideIn
import androidx.compose.animation.slideInVertically
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.unit.dp

@Composable
fun AnimatedVisibilityScope.Item(modifier: Modifier, backgroundColor: Color) {
    // Creates a custom enter/exit animation for scale property.
    val scale by transition.animateFloat { enterExitState ->
        // Enter transition will be animating the scale from 0.9f to 1.0f
        // (i.e. PreEnter -> Visible). Exit transition will be from 1.0f to
        // 0.5f (i.e. Visible -> PostExit)
        when (enterExitState) {
            EnterExitState.PreEnter -> 0.9f
            EnterExitState.Visible -> 1.0f
            EnterExitState.PostExit -> 0.5f
        }
    }

    // Since we defined `Item` as an extension function on AnimatedVisibilityScope, we can use
    // the `animateEnterExit` modifier to produce an enter/exit animation for it. This will
    // run simultaneously with the `AnimatedVisibility`'s enter/exit.
    Box(
        modifier
            .fillMaxWidth()
            .padding(5.dp)
            .animateEnterExit(
                // Slide in from below,
                enter = slideInVertically(initialOffsetY = { it }),
                // No slide on the way out. So the exit animation will be scale (from the custom
                // scale animation defined above) and fade (from AnimatedVisibility)
                exit = ExitTransition.None,
            )
            .graphicsLayer {
                scaleX = scale
                scaleY = scale
            }
            .clip(RoundedCornerShape(20.dp))
            .background(backgroundColor)
            .fillMaxSize()
    ) {
        // Content of the item goes here...
    }
}

@Composable
fun AnimateMainContent(mainContentVisible: MutableTransitionState<Boolean>) {
    Box {
        // Use the `MutableTransitionState<Boolean>` to specify whether AnimatedVisibility
        // should be visible. This will also allow AnimatedVisibility animation states to be
        // observed externally.
        AnimatedVisibility(
            visibleState = mainContentVisible,
            modifier = Modifier.fillMaxSize(),
            enter = fadeIn(),
            exit = fadeOut(),
        ) {
            Box {
                Column(Modifier.fillMaxSize()) {
                    // We have created `Item`s below as extension functions on
                    // AnimatedVisibilityScope in this example. So they can define their own
                    // enter/exit to run alongside the enter/exit defined in AnimatedVisibility.
                    Item(Modifier.weight(1f), backgroundColor = Color(0xffff6f69))
                    Item(Modifier.weight(1f), backgroundColor = Color(0xffffcc5c))
                }
                // This FAB will be simply fading in/out as specified by the AnimatedVisibility
                FloatingActionButton(
                    onClick = {},
                    modifier = Modifier.align(Alignment.BottomEnd).padding(20.dp),
                    backgroundColor = MaterialTheme.colors.primary,
                ) {
                    Icon(Icons.Default.Favorite, contentDescription = null)
                }
            }
        }

        // Here we can get a signal for when the Enter/Exit animation of the content above
        // has finished by inspecting the MutableTransitionState passed to the
        // AnimatedVisibility. This allows sequential animation after the enter/exit.
        AnimatedVisibility(
            // Once the main content is visible (i.e. targetState == true), and no pending
            // animations. We will start another enter animation sequentially.
            visible = mainContentVisible.targetState && mainContentVisible.isIdle,
            modifier = Modifier.align(Alignment.Center),
            enter = expandVertically(),
            exit = fadeOut(animationSpec = tween(50)),
        ) {
            Text("Transition Finished")
        }
    }
}
```

## Protected constructors

### ExitTransition

Cmn

```
protected ExitTransition()
```

## Public functions

### equals

Cmn

```
open operator fun equals(other: Any?): Boolean
```

### hashCode

Cmn

```
open fun hashCode(): Int
```

### plus

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.0.0)

```
operator fun plus(exit: ExitTransition): ExitTransition
```

Combines different exit transitions. The order of the `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`s being combined does not matter, as these `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`s will start simultaneously. The order of applying transforms from these exit transitions (if defined) is: veil first, then alpha and scale, shrink or expand, then slide.

```kotlin
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 |
|---|---|
| `exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` | another `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` to be combined. |

### toString

Cmn

```
open fun toString(): String
```

## Public properties

### config

Cmn Added in [1.13.0-rc01](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.13.0-rc01)

```
abstract val config: EnterExitTransitionConfig
```

The underlying transition configuration containing the specs for fade, slide, scale, shrink, and veil animations.