# AnimatedVisibility

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable 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)( visible: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition, exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition, label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` `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 animates the appearance and disappearance of its content, as `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` value changes. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)( visibleState: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html>, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition, exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition, label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable animates the appearance and disappearance of its content, as `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`'s `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#targetState()` changes. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable <T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition<T>.https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)( visible: (T) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition, exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` This extension function creates an `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)` composable as a child Transition of the given Transition. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)( visible: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition, exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition, label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable animates the appearance and disappearance of its content when the `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` is in a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Column.composable#Column(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,kotlin.Function1)`. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)( visibleState: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html>, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition, exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition, label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable animates the appearance and disappearance of its content as `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`'s `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#targetState()` changes. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)( visible: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition, exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition, label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable animates the appearance and disappearance of its content when the `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` is in a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)( visibleState: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html>, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition, exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition, label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable animates the appearance and disappearance of its content as `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`'s `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#targetState()` changes. | Cmn |

## Functions

### AnimatedVisibility

Cmn 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/AnimatedVisibility.kt+function:AnimatedVisibility) Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.1.0)

```
@Composable
fun AnimatedVisibility(
    visible: Boolean,
    modifier: Modifier = Modifier,
    enter: EnterTransition = fadeIn() + expandIn(),
    exit: ExitTransition = shrinkOut() + fadeOut(),
    label: String = "AnimatedVisibility",
    content: @Composable AnimatedVisibilityScope.() -> Unit
): Unit
```

`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 animates the appearance and disappearance of its content, as `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` value changes. Different `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition`s and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`s can be defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` for the appearance and disappearance animation. There are 4 types of `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`: Fade, Expand/Shrink, Scale and Slide. The enter transitions can be combined using `+`. Same for exit transitions. The order of the combination does not matter, as the transition animations will start simultaneously. See `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` for details on the three types of transition.

Aside from these three types of `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`, `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)` also supports custom enter/exit animations. Some use cases may benefit from custom enter/exit animations on shape, scale, color, etc. Custom enter/exit animations can be created using the `Transition<EnterExitState>` object from the `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope` (i.e. `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope#transition()`). See the second sample code snippet below for example. These custom animations will be running alongside of the built-in animations specified in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`. In cases where the enter/exit animation needs to be completely customized, `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and/or `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` can be specified as `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition#None()` and/or `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition#None()` as needed. `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)` will wait until *all* of enter/exit animations to finish before it considers itself idle. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` will only be removed after all the (built-in and custom) exit animations have finished.

`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)` creates a custom `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)` for its content. The size of the custom layout is determined by the largest width and largest height of the children. All children will be aligned to the top start of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)`.

**Note** : Once the exit transition is finished, the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable will be removed from the tree, and disposed. If there's a need to observe the state change of the enter/exit transition and follow up additional action (e.g. remove data, sequential animation, etc), consider the AnimatedVisibility API variant that takes a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState` parameter.

By default, the enter transition will be a combination of `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` of the content from the bottom end. And the exit transition will be shrinking the content towards the bottom end while fading out (i.e. `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#shrinkOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)`). The expanding and shrinking will likely also animate the parent and siblings if they rely on the size of appearing/disappearing content. When 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 is put in a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)` or a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Column.composable#Column(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,kotlin.Function1)`, the default enter and exit transitions are tailored to that particular container. See `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` for details.

Here are two examples of `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)`: one using the built-in enter/exit transition, the other using a custom enter/exit animation.

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

The example blow shows how a custom enter/exit animation can be created using the Transition object (i.e. Transition) from `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope`.

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.AnimatedVisibilityScope
import androidx.compose.animation.EnterExitState
import androidx.compose.animation.core.animateDp
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleOut
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.shape.RoundedCornerShape
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.Color
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }
Box(modifier = Modifier.clickable { visible = !visible }) {
    AnimatedVisibility(
        visible = visible,
        modifier = Modifier.align(Alignment.Center),
        enter = fadeIn(),
        exit = fadeOut(animationSpec = tween(200)) + scaleOut(),
    ) { // Content that needs to appear/disappear goes here:
        // Here we can optionally define a custom enter/exit animation by creating an animation
        // using the Transition<EnterExitState> object from AnimatedVisibilityScope:

        // As a part of the enter transition, the corner radius will be animated from 0.dp to
        // 50.dp.
        val cornerRadius by
            transition.animateDp {
                when (it) {
                    EnterExitState.PreEnter -> 0.dp
                    EnterExitState.Visible -> 50.dp
                    // No corner radius change when exiting.
                    EnterExitState.PostExit -> 50.dp
                }
            }
        Box(
            Modifier.background(Color.Red, shape = RoundedCornerShape(cornerRadius))
                .height(100.dp)
                .fillMaxWidth()
        )
    }
}
```

| Parameters |
|---|---|
| `visible: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | defines whether the content should be visible |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | modifier for the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)` created to contain the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |
| `enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition = fadeIn() + expandIn()` | EnterTransition(s) used for the appearing animation, fading in while expanding by default |
| `exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition = shrinkOut() + fadeOut()` | ExitTransition(s) used for the disappearing animation, fading out while shrinking by default |
| `label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html = "AnimatedVisibility"` | A label to differentiate from other animations in Android Studio animation preview. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Content to appear or disappear based on the value of `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` |   |
| `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#shrinkOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/CapturedAnimatedVisibility.composable#CapturedAnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function0)` |   |

### AnimatedVisibility

Cmn 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/AnimatedVisibility.kt+function:AnimatedVisibility) Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.1.0)

```
@Composable
fun AnimatedVisibility(
    visibleState: MutableTransitionState<Boolean>,
    modifier: Modifier = Modifier,
    enter: EnterTransition = fadeIn() + expandIn(),
    exit: ExitTransition = fadeOut() + shrinkOut(),
    label: String = "AnimatedVisibility",
    content: @Composable AnimatedVisibilityScope.() -> Unit
): Unit
```

`https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable animates the appearance and disappearance of its content, as `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`'s `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#targetState()` changes. The `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` can also be used to observe the state of `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`. For example: `visibleState.isIdle` indicates whether all the animations have finished in `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`, and `visibleState.currentState` returns the initial state of the current animations.

Different `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition`s and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`s can be defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` for the appearance and disappearance animation. There are 4 types of `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`: Fade, Expand/Shrink, Scale and Slide. The enter transitions can be combined using `+`. Same for exit transitions. The order of the combination does not matter, as the transition animations will start simultaneously. See `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` for details on the three types of transition.

Aside from these three types of `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` also supports custom enter/exit animations. Some use cases may benefit from custom enter/exit animations on shape, scale, color, etc. Custom enter/exit animations can be created using the `Transition<EnterExitState>` object from the `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope` (i.e. `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope#transition()`). See `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterExitState` for an example of custom animations. These custom animations will be running along side of the built-in animations specified in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`. In cases where the enter/exit animation needs to be completely customized, `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and/or `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` can be specified as `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition#None()` and/or `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition#None()` as needed. `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` will wait until *all* of enter/exit animations to finish before it considers itself idle. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` will only be removed after all the (built-in and custom) exit animations have finished.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` creates a custom `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)` for its content. The size of the custom layout is determined by the largest width and largest height of the children. All children will be aligned to the top start of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)`.

**Note** : Once the exit transition is finished, the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable will be removed from the tree, and disposed. Both `currentState` and `targetState` will be `false` for `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`.

By default, the enter transition will be a combination of `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` of the content from the bottom end. And the exit transition will be shrinking the content towards the bottom end while fading out (i.e. `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#shrinkOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)`). The expanding and shrinking will likely also animate the parent and siblings if they rely on the size of appearing/disappearing content. When the `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable is put in a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)` or a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Column.composable#Column(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,kotlin.Function1)`, the default enter and exit transitions are tailored to that particular container. See `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` for details.

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.MutableTransitionState
import androidx.compose.animation.expandVertically
import androidx.compose.animation.shrinkVertically
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

val turquoiseColors =
    listOf(
        Color(0xff07688C),
        Color(0xff1986AF),
        Color(0xff50B6CD),
        Color(0xffBCF8FF),
        Color(0xff8AEAE9),
        Color(0xff46CECA),
    )

// MyModel class handles the data change of the items that are displayed in LazyColumn.
class MyModel {
    private val _items: MutableList<ColoredItem> = mutableStateListOf()
    private var lastItemId = 0
    val items: List<ColoredItem> = _items

    // Each item has a MutableTransitionState field to track as well as to mutate the item's
    // visibility. When the MutableTransitionState's targetState changes, corresponding
    // transition will be fired. MutableTransitionState allows animation lifecycle to be
    // observed through it's [currentState] and [isIdle]. See below for details.
    inner class ColoredItem(val visible: MutableTransitionState<Boolean>, val itemId: Int) {
        val color: Color
            get() = turquoiseColors.let { it[itemId % it.size] }
    }

    fun addNewItem() {
        lastItemId++
        _items.add(
            ColoredItem(
                // Here the initial state of the MutableTransitionState is set to false, and
                // target state is set to true. This will result in an enter transition for
                // the newly added item.
                MutableTransitionState(false).apply { targetState = true },
                lastItemId,
            )
        )
    }

    fun removeItem(item: ColoredItem) {
        // By setting the targetState to false, this will effectively trigger an exit
        // animation in AnimatedVisibility.
        item.visible.targetState = false
    }

    fun pruneItems() {
        // Inspect the animation status through MutableTransitionState. If isIdle == true,
        // all animations have finished for the transition.
        _items.removeAll(
            items.filter {
                // This checks that the animations have finished && the animations are exit
                // transitions. In other words, the item has finished animating out.
                it.visible.isIdle && !it.visible.targetState
            }
        )
    }

    fun removeAll() {
        _items.forEach { it.visible.targetState = false }
    }
}

@Composable
fun AnimatedVisibilityInLazyColumn() {
    Column {
        val model = remember { MyModel() }
        Row(Modifier.fillMaxWidth()) {
            Button({ model.addNewItem() }, modifier = Modifier.padding(15.dp).weight(1f)) {
                Text("Add")
            }
        }

        // This sets up a flow to check whether any item has finished animating out. If yes,
        // notify the model to prune the list.
        LaunchedEffect(model) {
            snapshotFlow {
                    model.items.firstOrNull { it.visible.isIdle && !it.visible.targetState }
                }
                .collect {
                    if (it != null) {
                        model.pruneItems()
                    }
                }
        }
        LazyColumn {
            items(model.items, key = { it.itemId }) { item ->
                AnimatedVisibility(
                    item.visible,
                    enter = expandVertically(),
                    exit = shrinkVertically(),
                ) {
                    Box(Modifier.fillMaxWidth().requiredHeight(90.dp).background(item.color)) {
                        Button(
                            { model.removeItem(item) },
                            modifier = Modifier.align(Alignment.CenterEnd).padding(15.dp),
                        ) {
                            Text("Remove")
                        }
                    }
                }
            }
        }

        Button({ model.removeAll() }, modifier = Modifier.align(Alignment.End).padding(15.dp)) {
            Text("Clear All")
        }
    }
}
```

| Parameters |
|---|---|
| `visibleState: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html>` | defines whether the content should be visible |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | modifier for the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)` created to contain the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |
| `enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition = fadeIn() + expandIn()` | EnterTransition(s) used for the appearing animation, fading in while expanding by default |
| `exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition = fadeOut() + shrinkOut()` | ExitTransition(s) used for the disappearing animation, fading out while shrinking by default |
| `label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html = "AnimatedVisibility"` | A label to differentiate from other animations in Android Studio animation preview. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Content to appear or disappear based on the value of `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` |   |
| `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#shrinkOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope` |   |

### Transition.AnimatedVisibility

Cmn 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/AnimatedVisibility.kt+function:AnimatedVisibility) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.0.0)

```
@Composable
fun <T : Any?> Transition<T>.AnimatedVisibility(
    visible: (T) -> Boolean,
    modifier: Modifier = Modifier,
    enter: EnterTransition = fadeIn() + expandIn(),
    exit: ExitTransition = shrinkOut() + fadeOut(),
    content: @Composable AnimatedVisibilityScope.() -> Unit
): Unit
```

This extension function creates an `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)` composable as a child Transition of the given Transition. This means: 1) the enter/exit transition is now triggered by the provided `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition`'s `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition#targetState()` change. When the targetState changes, the visibility will be derived using the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)` lambda and `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition#targetState()`. 2) The enter/exit transitions, as well as any custom enter/exit animations defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)` are now hoisted to the parent Transition. The parent Transition will wait for all of them to finish before it considers itself finished (i.e. `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition#currentState()` = `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition#targetState()`), and subsequently removes the content in the exit case.

Different `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition`s and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`s can be defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)` for the appearance and disappearance animation. There are 4 types of `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`: Fade, Expand/Shrink, Scale and Slide. The enter transitions can be combined using `+`. Same for exit transitions. The order of the combination does not matter, as the transition animations will start simultaneously. See `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` for details on the three types of transition.

Aside from these three types of `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)` also supports custom enter/exit animations. Some use cases may benefit from custom enter/exit animations on shape, scale, color, etc. Custom enter/exit animations can be created using the `Transition<EnterExitState>` object from the `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope` (i.e. `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope#transition()`). See `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterExitState` for an example of custom animations. These custom animations will be running along side of the built-in animations specified in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)`. In cases where the enter/exit animation needs to be completely customized, `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)` and/or `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)` can be specified as `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition#None()` and/or `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition#None()` as needed. `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)` will wait until *all* of enter/exit animations to finish before it considers itself idle. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)` will only be removed after all the (built-in and custom) exit animations have finished.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)` creates a custom `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)` for its content. The size of the custom layout is determined by the largest width and largest height of the children. All children will be aligned to the top start of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)`.

**Note** : Once the exit transition is finished, the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)` composable will be removed from the tree, and disposed.

By default, the enter transition will be a combination of `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` of the content from the bottom end. And the exit transition will be shrinking the content towards the bottom end while fading out (i.e. `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#shrinkOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)`). The expanding and shrinking will likely also animate the parent and siblings if they rely on the size of appearing/disappearing content.

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.animateColor
import androidx.compose.animation.core.animateDp
import androidx.compose.animation.core.tween
import androidx.compose.animation.core.updateTransition
import androidx.compose.animation.expandVertically
import androidx.compose.animation.shrinkVertically
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
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.Color
import androidx.compose.ui.unit.dp

@Composable
fun ItemMainContent() {
    Row(Modifier.height(100.dp).fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier.size(60.dp)
                .align(Alignment.CenterVertically)
                .background(Color(0xffcdb7f6), CircleShape)
        )
        Column(Modifier.align(Alignment.CenterVertically)) {
            Box(Modifier.height(30.dp).width(300.dp).padding(5.dp).background(Color.LightGray))
            Box(Modifier.height(30.dp).width(300.dp).padding(5.dp).background(Color.LightGray))
        }
    }
}

@Composable
fun SelectableItem() {
    // This sample animates a number of properties, including AnimatedVisibility, as a part of
    // the Transition going between selected and unselected.
    Box(Modifier.padding(15.dp)) {
        var selected by remember { mutableStateOf(false) }
        // Creates a transition to animate visual changes when `selected` is changed.
        val selectionTransition = updateTransition(selected)
        // Animates the border color as a part of the transition
        val borderColor by
            selectionTransition.animateColor { isSelected ->
                if (isSelected) Color(0xff03a9f4) else Color.White
            }
        // Animates the background color when selected state changes
        val contentBackground by
            selectionTransition.animateColor { isSelected ->
                if (isSelected) Color(0xffdbf0fe) else Color.White
            }
        // Animates elevation as a part of the transition
        val elevation by
            selectionTransition.animateDp { isSelected -> if (isSelected) 10.dp else 2.dp }
        Surface(
            shape = RoundedCornerShape(10.dp),
            border = BorderStroke(2.dp, borderColor),
            modifier = Modifier.clickable { selected = !selected },
            color = contentBackground,
            elevation = elevation,
        ) {
            Column(Modifier.fillMaxWidth()) {
                ItemMainContent()
                // Creates an AnimatedVisibility as a part of the transition, so that when
                // selected it's visible. This will hoist all the animations that are internal
                // to AnimatedVisibility (i.e. fade, slide, etc) to the transition. As a result,
                // `selectionTransition` will not finish until all the animations in
                // AnimatedVisibility as well as animations added directly to it have finished.
                selectionTransition.AnimatedVisibility(
                    visible = { it },
                    enter = expandVertically(),
                    exit = shrinkVertically(),
                ) {
                    Box(Modifier.fillMaxWidth().padding(10.dp)) {
                        Text(
                            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed" +
                                " eiusmod tempor incididunt labore et dolore magna aliqua. " +
                                "Ut enim ad minim veniam, quis nostrud exercitation ullamco " +
                                "laboris nisi ut aliquip ex ea commodo consequat. Duis aute " +
                                "irure dolor."
                        )
                    }
                }
            }
        }
    }
}
```

| Parameters |
|---|---|
| `visible: (T) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | defines whether the content should be visible based on transition state T |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | modifier for the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)` created to contain the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)` |
| `enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition = fadeIn() + expandIn()` | EnterTransition(s) used for the appearing animation, fading in while expanding vertically by default |
| `exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition = shrinkOut() + fadeOut()` | ExitTransition(s) used for the disappearing animation, fading out while shrinking vertically by default |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Content to appear or disappear based on the visibility derived from the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition#targetState()` and the provided `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)` lambda |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` |   |
| `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#shrinkOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)` |   |

### ColumnScope.AnimatedVisibility

Cmn 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/AnimatedVisibility.kt+function:AnimatedVisibility) Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.1.0)

```
@Composable
fun ColumnScope.AnimatedVisibility(
    visible: Boolean,
    modifier: Modifier = Modifier,
    enter: EnterTransition = fadeIn() + expandVertically(),
    exit: ExitTransition = fadeOut() + shrinkVertically(),
    label: String = "AnimatedVisibility",
    content: @Composable AnimatedVisibilityScope.() -> Unit
): Unit
```

`https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable animates the appearance and disappearance of its content when the `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` is in a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Column.composable#Column(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,kotlin.Function1)`. The default animations are tailored specific to the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Column.composable#Column(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,kotlin.Function1)` layout. See more details below.

Different `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition`s and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`s can be defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` for the appearance and disappearance animation. There are 4 types of `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`: Fade, Expand/Shrink, Scale and Slide. The enter transitions can be combined using `+`. Same for exit transitions. The order of the combination does not matter, as the transition animations will start simultaneously. See `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` for details on the three types of transition.

The default `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` transition is configured based on the vertical layout of a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Column.composable#Column(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,kotlin.Function1)`. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` defaults to a combination of fading in and expanding the content vertically. (The bottom of the content will be the leading edge as the content expands to its full height.) And the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` defaults to shrinking the content vertically with the bottom of the content being the leading edge while fading out. The expanding and shrinking will likely also animate the parent and siblings in the column since they rely on the size of appearing/disappearing content.

Aside from these three types of `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` also supports custom enter/exit animations. Some use cases may benefit from custom enter/exit animations on shape, scale, color, etc. Custom enter/exit animations can be created using the `Transition<EnterExitState>` object from the `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope` (i.e. `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope#transition()`). See `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterExitState` for an example of custom animations. These custom animations will be running along side of the built-in animations specified in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`. In cases where the enter/exit animation needs to be completely customized, `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and/or `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` can be specified as `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition#None()` and/or `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition#None()` as needed. `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` will wait until *all* of enter/exit animations to finish before it considers itself idle. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` will only be removed after all the (built-in and custom) exit animations have finished.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` creates a custom `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)` for its content. The size of the custom layout is determined by the largest width and largest height of the children. All children will be aligned to the top start of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)`.

**Note** : Once the exit transition is finished, the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable will be removed from the tree, and disposed. If there's a need to observe the state change of the enter/exit transition and follow up additional action (e.g. remove data, sequential animation, etc), consider the AnimatedVisibility API variant that takes a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState` parameter.

Here's an example of using `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` in a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Column.composable#Column(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,kotlin.Function1)`:

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

var itemIndex by remember { mutableStateOf(0) }
val colors = listOf(Color.Red, Color.Green, Color.Blue)
Column(Modifier.fillMaxWidth().clickable { itemIndex = (itemIndex + 1) % colors.size }) {
    colors.forEachIndexed { i, color ->
        // By default ColumnScope.AnimatedVisibility expands and shrinks new content while
        // fading.
        AnimatedVisibility(i <= itemIndex) {
            Box(Modifier.requiredHeight(40.dp).fillMaxWidth().background(color))
        }
    }
}
```

| Parameters |
|---|---|
| `visible: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | defines whether the content should be visible |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | modifier for the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)` created to contain the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |
| `enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition = fadeIn() + expandVertically()` | EnterTransition(s) used for the appearing animation, fading in while expanding vertically by default |
| `exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition = fadeOut() + shrinkVertically()` | ExitTransition(s) used for the disappearing animation, fading out while shrinking vertically by default |
| `label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html = "AnimatedVisibility"` | A label to differentiate from other animations in Android Studio animation preview. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Content to appear or disappear based on the value of `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` |   |
| `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#shrinkOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope` |   |

### ColumnScope.AnimatedVisibility

Cmn 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/AnimatedVisibility.kt+function:AnimatedVisibility) Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.1.0)

```
@Composable
fun ColumnScope.AnimatedVisibility(
    visibleState: MutableTransitionState<Boolean>,
    modifier: Modifier = Modifier,
    enter: EnterTransition = expandVertically() + fadeIn(),
    exit: ExitTransition = shrinkVertically() + fadeOut(),
    label: String = "AnimatedVisibility",
    content: @Composable AnimatedVisibilityScope.() -> Unit
): Unit
```

`https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable animates the appearance and disappearance of its content as `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`'s `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#targetState()` changes. The default `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` transitions are tailored specific to the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Column.composable#Column(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,kotlin.Function1)` layout. See more details below. The `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` can also be used to observe the state of `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`. For example: `visibleState.isIdle` indicates whether all the animations have finished in `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`, and `visibleState.currentState` returns the initial state of the current animations.

Different `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition`s and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`s can be defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` for the appearance and disappearance animation. There are 4 types of `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`: Fade, Expand/Shrink, Scale and Slide. The enter transitions can be combined using `+`. Same for exit transitions. The order of the combination does not matter, as the transition animations will start simultaneously. See `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` for details on the three types of transition.

The default `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` transition is configured based on the vertical layout of a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Column.composable#Column(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,kotlin.Function1)`. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` defaults to a combination of fading in and expanding the content vertically. (The bottom of the content will be the leading edge as the content expands to its full height.) And the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` defaults to shrinking the content vertically with the bottom of the content being the leading edge while fading out. The expanding and shrinking will likely also animate the parent and siblings in the column since they rely on the size of appearing/disappearing content.

Aside from these three types of `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` also supports custom enter/exit animations. Some use cases may benefit from custom enter/exit animations on shape, scale, color, etc. Custom enter/exit animations can be created using the `Transition<EnterExitState>` object from the `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope` (i.e. `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope#transition()`). See `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterExitState` for an example of custom animations. These custom animations will be running along side of the built-in animations specified in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`. In cases where the enter/exit animation needs to be completely customized, `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and/or `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` can be specified as `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition#None()` and/or `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition#None()` as needed. `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` will wait until *all* of enter/exit animations to finish before it considers itself idle. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` will only be removed after all the (built-in and custom) exit animations have finished.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` creates a custom `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)` for its content. The size of the custom layout is determined by the largest width and largest height of the children. All children will be aligned to the top start of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)`.

**Note** : Once the exit transition is finished, the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable will be removed from the tree, and disposed. Both `currentState` and `targetState` will be `false` for `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`.

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.MutableTransitionState
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }
val colors = remember { listOf(Color(0xff2a9d8f), Color(0xffe9c46a), Color(0xfff4a261)) }
Column {
    repeat(3) {
        AnimatedVisibility(
            visibleState =
                remember {
                        // This sets up the initial state of the AnimatedVisibility to false to
                        // guarantee an initial enter transition. In contrast, initializing this
                        // as
                        // `MutableTransitionState(visible)` would result in no initial enter
                        // transition.
                        MutableTransitionState(initialState = false)
                    }
                    .apply {
                        // This changes the target state of the visible state. If it's different
                        // than
                        // the initial state, an enter/exit transition will be triggered.
                        targetState = visible
                    }
        ) { // Content that needs to appear/disappear goes here:
            Box(Modifier.fillMaxWidth().height(100.dp).background(colors[it]))
        }
    }
}
```

| Parameters |
|---|---|
| `visibleState: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html>` | defines whether the content should be visible |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | modifier for the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)` created to contain the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |
| `enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition = expandVertically() + fadeIn()` | EnterTransition(s) used for the appearing animation, fading in while expanding vertically by default |
| `exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition = shrinkVertically() + fadeOut()` | ExitTransition(s) used for the disappearing animation, fading out while shrinking vertically by default |
| `label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html = "AnimatedVisibility"` | A label to differentiate from other animations in Android Studio animation preview. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Content to appear or disappear based on of `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` |   |
| `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#shrinkOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope` |   |

### RowScope.AnimatedVisibility

Cmn 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/AnimatedVisibility.kt+function:AnimatedVisibility) Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.1.0)

```
@Composable
fun RowScope.AnimatedVisibility(
    visible: Boolean,
    modifier: Modifier = Modifier,
    enter: EnterTransition = fadeIn() + expandHorizontally(),
    exit: ExitTransition = fadeOut() + shrinkHorizontally(),
    label: String = "AnimatedVisibility",
    content: @Composable AnimatedVisibilityScope.() -> Unit
): Unit
```

`https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable animates the appearance and disappearance of its content when the `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` is in a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`. The default animations are tailored specific to the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)` layout. See more details below.

Different `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition`s and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`s can be defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` for the appearance and disappearance animation. There are 4 types of `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`: Fade, Expand/Shrink, Scale, and Slide. The enter transitions can be combined using `+`. Same for exit transitions. The order of the combination does not matter, as the transition animations will start simultaneously. See `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` for details on the three types of transition.

The default `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` transition is configured based on the horizontal layout of a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` defaults to a combination of fading in and expanding the content horizontally. (The end of the content will be the leading edge as the content expands to its full width.) And `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` defaults to shrinking the content horizontally with the end of the content being the leading edge while fading out. The expanding and shrinking will likely also animate the parent and siblings in the row since they rely on the size of appearing/disappearing content.

Aside from these three types of `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` also supports custom enter/exit animations. Some use cases may benefit from custom enter/exit animations on shape, scale, color, etc. Custom enter/exit animations can be created using the `Transition<EnterExitState>` object from the `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope` (i.e. `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope#transition()`). See `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterExitState` for an example of custom animations. These custom animations will be running along side of the built-in animations specified in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`. In cases where the enter/exit animation needs to be completely customized, `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and/or `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` can be specified as `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition#None()` and/or `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition#None()` as needed. `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` will wait until *all* of enter/exit animations to finish before it considers itself idle. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` will only be removed after all the (built-in and custom) exit animations have finished.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` creates a custom `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)` for its content. The size of the custom layout is determined by the largest width and largest height of the children. All children will be aligned to the top start of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)`.

**Note** : Once the exit transition is finished, the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable will be removed from the tree, and disposed. If there's a need to observe the state change of the enter/exit transition and follow up additional action (e.g. remove data, sequential animation, etc), consider the AnimatedVisibility API variant that takes a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState` parameter.

Here's an example of using `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` in a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`:

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.material.Button
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

var expanded by remember { mutableStateOf(true) }
FloatingActionButton(
    onClick = { expanded = !expanded },
    modifier = Modifier.align(Alignment.CenterHorizontally),
) {
    Row(Modifier.padding(start = 12.dp, end = 12.dp)) {
        Icon(
            Icons.Default.Favorite,
            contentDescription = "Favorite",
            modifier = Modifier.align(Alignment.CenterVertically),
        )
        AnimatedVisibility(expanded, modifier = Modifier.align(Alignment.CenterVertically)) {
            Text(modifier = Modifier.padding(start = 12.dp), text = "Favorite")
        }
    }
}
Spacer(Modifier.requiredHeight(20.dp))
```

| Parameters |
|---|---|
| `visible: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | defines whether the content should be visible |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | modifier for the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)` created to contain the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |
| `enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition = fadeIn() + expandHorizontally()` | EnterTransition(s) used for the appearing animation, fading in while expanding horizontally by default |
| `exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition = fadeOut() + shrinkHorizontally()` | ExitTransition(s) used for the disappearing animation, fading out while shrinking horizontally by default |
| `label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html = "AnimatedVisibility"` | A label to differentiate from other animations in Android Studio animation preview. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Content to appear or disappear based on the value of `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` |   |
| `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#shrinkOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope` |   |

### RowScope.AnimatedVisibility

Cmn 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/AnimatedVisibility.kt+function:AnimatedVisibility) Added in [1.1.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.1.0)

```
@Composable
fun RowScope.AnimatedVisibility(
    visibleState: MutableTransitionState<Boolean>,
    modifier: Modifier = Modifier,
    enter: EnterTransition = expandHorizontally() + fadeIn(),
    exit: ExitTransition = shrinkHorizontally() + fadeOut(),
    label: String = "AnimatedVisibility",
    content: @Composable AnimatedVisibilityScope.() -> Unit
): Unit
```

`https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable animates the appearance and disappearance of its content as `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`'s `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#targetState()` changes. The default `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` transitions are tailored specific to the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)` layout. See more details below. The `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` can also be used to observe the state of `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`. For example: `visibleState.isIdle` indicates whether all the animations have finished in `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`, and `visibleState.currentState` returns the initial state of the current animations.

Different `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition`s and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`s can be defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` for the appearance and disappearance animation. There are 4 types of `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`: Fade, Expand/Shrink, Scale and Slide. The enter transitions can be combined using `+`. Same for exit transitions. The order of the combination does not matter, as the transition animations will start simultaneously. See `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` for details on the three types of transition.

The default `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` transition is configured based on the horizontal layout of a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` defaults to a combination of fading in and expanding the content horizontally. (The end of the content will be the leading edge as the content expands to its full width.) And `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` defaults to shrinking the content horizontally with the end of the content being the leading edge while fading out. The expanding and shrinking will likely also animate the parent and siblings in the row since they rely on the size of appearing/disappearing content.

Aside from these three types of `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` also supports custom enter/exit animations. Some use cases may benefit from custom enter/exit animations on shape, scale, color, etc. Custom enter/exit animations can be created using the `Transition<EnterExitState>` object from the `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope` (i.e. `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope#transition()`). See `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterExitState` for an example of custom animations. These custom animations will be running along side of the built-in animations specified in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`. In cases where the enter/exit animation needs to be completely customized, `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and/or `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` can be specified as `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition#None()` and/or `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition#None()` as needed. `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` will wait until *all* of enter/exit animations to finish before it considers itself idle. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` will only be removed after all the (built-in and custom) exit animations have finished.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` creates a custom `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)` for its content. The size of the custom layout is determined by the largest width and largest height of the children. All children will be aligned to the top start of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)`.

**Note** : Once the exit transition is finished, the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable will be removed from the tree, and disposed. Both `currentState` and `targetState` will be `false` for `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`.

| Parameters |
|---|---|
| `visibleState: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html>` | defines whether the content should be visible |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | modifier for the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)` created to contain the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |
| `enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition = expandHorizontally() + fadeIn()` | EnterTransition(s) used for the appearing animation, fading in while expanding vertically by default |
| `exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition = shrinkHorizontally() + fadeOut()` | ExitTransition(s) used for the disappearing animation, fading out while shrinking vertically by default |
| `label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html = "AnimatedVisibility"` | A label to differentiate from other animations in Android Studio animation preview. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Content to appear or disappear based on the value of `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` |   |
| `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#shrinkOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope` |   |