---
title: "ExitTransition"
description: "[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 [ExitTransition]s
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]."
type: "class"
---

<div class='type'>Class</div>


<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
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 `ExitTransition`s
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

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


Combines different exit transitions. The order of the `ExitTransition`s being combined does
not matter, as these `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.

#### Parameters

| | |
| --- | --- |
| exit | another `ExitTransition` to be combined. |



## Companion Object

#### Properties

<div class='sourceset sourceset-common'>Common</div>


```kotlin
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<EnterExitState>
scope that `AnimatedVisibility` provided, the content will be removed from
`AnimatedVisibility` right away.





## Code Examples

### SlideTransition
```kotlin
@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)) {}
    }
}
```