# CapturedAnimatedVisibility

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/CapturedAnimatedVisibility.composable#CapturedAnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function0)( 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://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` `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)` animates the appearance and disappearance of its content as `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#CapturedAnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function0)` 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/CapturedAnimatedVisibility.composable#CapturedAnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function0)( 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://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Animates the appearance and disappearance of its content as `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#CapturedAnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function0)`'s target state changes. | Cmn |

## Functions

### CapturedAnimatedVisibility

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

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

`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)` animates the appearance and disappearance of its content as `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#CapturedAnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function0)` changes. Unlike `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)`, when `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#CapturedAnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function0)` becomes false the child composition is removed **immediately** and the exit transition animates the last captured frame of the content via a graphics layer. This means the caller does not need to retain any data for the content once `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#CapturedAnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function0)` is false.

`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)` is designed for content removal animations where there is a need to immediately release resources or a desire to no longer maintain data or states during exit. Since `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)` displays a layer that captured the rendering of the content, it will also not respond to any gestures. In contrast, content in `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)` remains live in composition during exit, responding to touch input and continuing internal animations (e.g. shared element or infinite animations) until the exit animation finishes and the content is removed from composition.

Because the content is no longer live during exit, no `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope` is provided to the content lambda.

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.CapturedAnimatedVisibility
import androidx.compose.animation.expandVertically
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
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.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.Text
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) }
Column {
    Button(onClick = { visible = !visible }) { Text(if (visible) "Hide" else "Show") }
    Spacer(Modifier.height(16.dp))
    CapturedAnimatedVisibility(
        visible = visible,
        enter = fadeIn() + expandVertically(),
        exit = fadeOut() + shrinkVertically(),
    ) {
        // Child composition is removed immediately when visible becomes false
        Box(Modifier.size(100.dp).background(Color.Blue, shape = RoundedCornerShape(8.dp)))
    }
}
```

| Parameters |
|---|---|
| `visible: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | controls whether the content should be visible |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` for the layout |
| `enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition = fadeIn() + expandIn()` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` used for the appearing animation |
| `exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition = shrinkOut() + fadeOut()` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` applied to the last captured frame when disappearing |
| `label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html = "CapturedAnimatedVisibility"` | label to differentiate from other animations in Android Studio Animation Preview |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | content to appear or disappear based on `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#CapturedAnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function0)` |

| See also |
|---|---|
| `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)` |   |

### CapturedAnimatedVisibility

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

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

Animates the appearance and disappearance of its content as `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#CapturedAnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function0)`'s target state changes.

Using a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState` allows observing the state of the animation (e.g. `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#currentState()`, \* `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#targetState()`, and `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#isIdle()`) as well as setting an initial visibility state that is different than the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#targetState()` to animate content upon entering composition.

Unlike `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)`, when `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#CapturedAnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function0)`'s `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#targetState()` becomes `false` the child composition is removed **immediately** in `https://developer.android.com/reference/kotlin/androidx/compose/animation/CapturedAnimatedVisibility.composable#CapturedAnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function0)`. The exit transition animates the last captured frame of the content via a graphics layer.

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.CapturedAnimatedVisibility
import androidx.compose.animation.core.MutableTransitionState
import androidx.compose.animation.expandVertically
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
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.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// MutableTransitionState allows observing the animation status (currentState, targetState, and
// isIdle) as well as setting an initial currentState = false and targetState = true to animate
// in immediately upon entering composition.
val visibleState = remember { MutableTransitionState(false) }.apply { targetState = true }

Column {
    Button(onClick = { visibleState.targetState = !visibleState.targetState }) {
        Text(if (visibleState.targetState) "Hide" else "Show")
    }
    Spacer(Modifier.height(8.dp))
    // Observe the current animation status directly via visibleState properties
    Text(
        "State: current=${visibleState.currentState}, " +
            "target=${visibleState.targetState}, " +
            "isIdle=${visibleState.isIdle}"
    )
    Spacer(Modifier.height(16.dp))
    CapturedAnimatedVisibility(
        visibleState = visibleState,
        enter = fadeIn() + expandVertically(),
        exit = fadeOut() + shrinkVertically(),
    ) {
        // Content animates IN from false -> true upon initial composition.
        // When targetState becomes false, child composition is removed immediately
        // while the last captured graphics layer frame animates OUT.
        Box(Modifier.size(100.dp).background(Color.Red, shape = RoundedCornerShape(8.dp)))
    }
}
```

| Parameters |
|---|---|
| `visibleState: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html>` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState` controlling visibility and allowing animation state observation |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` for the layout |
| `enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition = fadeIn() + expandIn()` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` used for the appearing animation |
| `exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition = shrinkOut() + fadeOut()` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` applied to the last captured frame when disappearing |
| `label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html = "CapturedAnimatedVisibility"` | label to differentiate from other animations in Android Studio Animation Preview |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | content to appear or disappear based on `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#CapturedAnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function0)` |

| See also |
|---|---|
| `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)` |   |