<h2 id="animatedspatialvisibility-visible-modifier-enter-exit-label-content">AnimatedSpatialVisibility</h2>

<div class='sourceset sourceset-android'>Android</div>

```kotlin
@Composable
@SubspaceComposable
public fun AnimatedSpatialVisibility(
    visible: Boolean,
    modifier: SubspaceModifier = SubspaceModifier,
    enter: SpatialEnterTransition = SpatialTransitionDefaults.DefaultEnter,
    exit: SpatialExitTransition = SpatialTransitionDefaults.DefaultExit,
    label: String = "AnimatedSpatialVisibility",
    content: @Composable @SubspaceComposable AnimatedSpatialVisibilityScope.() -> Unit,
)
```

[AnimatedSpatialVisibility](/jetpack-compose/androidx.xr.compose/compose/composable-functions/AnimatedSpatialVisibility) composable animates the appearance and disappearance of its subspace
content, as [visible](/jetpack-compose/androidx.compose.foundation/foundation-layout/modifiers/visible) value changes. Different [SpatialEnterTransition](/jetpack-compose/androidx.xr.compose/compose/classes/SpatialEnterTransition)s and
[SpatialExitTransition](/jetpack-compose/androidx.xr.compose/compose/classes/SpatialExitTransition)s can be defined in `enter` and `exit` for the appearance and
disappearance animation. There are 4 types of [SpatialEnterTransition](/jetpack-compose/androidx.xr.compose/compose/classes/SpatialEnterTransition) and
[SpatialExitTransition]: 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 [SpatialEnterTransition](/jetpack-compose/androidx.xr.compose/compose/classes/SpatialEnterTransition) and
[SpatialExitTransition](/jetpack-compose/androidx.xr.compose/compose/classes/SpatialExitTransition) for details on the three types of transition.

#### Parameters

| | |
| --- | --- |
| visible | defines whether the content should be visible |
| modifier | modifier for the [SubspaceLayout](/jetpack-compose/androidx.xr.compose/compose/composable-functions/SubspaceLayout) created to contain the `content` |
| enter | EnterTransition(s) used for the appearing animation |
| exit | ExitTransition(s) used for the disappearing animation |
| label | A label to differentiate from other animations in Android Studio animation preview. |
| content | Content to appear or disappear based on the value of [visible](/jetpack-compose/androidx.compose.foundation/foundation-layout/modifiers/visible) |

<hr class="docs-overload-divider">

<h2 id="animatedspatialvisibility-visiblestate-modifier-enter-exit-label-content">AnimatedSpatialVisibility</h2>

<div class='sourceset sourceset-android'>Android</div>

```kotlin
@Composable
@SubspaceComposable
public fun AnimatedSpatialVisibility(
    visibleState: MutableTransitionState<Boolean>,
    modifier: SubspaceModifier = SubspaceModifier,
    enter: SpatialEnterTransition = SpatialTransitionDefaults.DefaultEnter,
    exit: SpatialExitTransition = SpatialTransitionDefaults.DefaultExit,
    label: String = "AnimatedSpatialVisibility",
    content: @Composable @SubspaceComposable AnimatedSpatialVisibilityScope.() -> Unit,
)
```

[AnimatedSpatialVisibility](/jetpack-compose/androidx.xr.compose/compose/composable-functions/AnimatedSpatialVisibility) composable animates the appearance and disappearance of its content,
as `visibleState`'s [targetState](/jetpack-compose/androidx.compose.animation/animation-core/classes/MutableTransitionState) changes. The `visibleState`
can also be used to observe the state of [AnimatedSpatialVisibility](/jetpack-compose/androidx.xr.compose/compose/composable-functions/AnimatedSpatialVisibility). For example:
`visibleState.isIdle` indicates whether all the animations have finished in
[AnimatedSpatialVisibility](/jetpack-compose/androidx.xr.compose/compose/composable-functions/AnimatedSpatialVisibility), and `visibleState.currentState` returns the initial state of the
current animations.

#### Parameters

| | |
| --- | --- |
| visibleState | defines whether the content should be visible |
| modifier | modifier for the [SubspaceLayout](/jetpack-compose/androidx.xr.compose/compose/composable-functions/SubspaceLayout) created to contain the `content` |
| enter | EnterTransition(s) used for the appearing animation |
| exit | ExitTransition(s) used for the disappearing animation |
| label | A label to differentiate from other animations in Android Studio animation preview. |
| content | Content to appear or disappear based on the value of `visibleState` |

<hr class="docs-overload-divider">

<h2 id="animatedspatialvisibility-visible-modifier-enter-exit-content">AnimatedSpatialVisibility</h2>

<div class='sourceset sourceset-android'>Android</div>

```kotlin
@Composable
@SubspaceComposable
public fun <T> Transition<T>.AnimatedSpatialVisibility(
    visible: (T) -> Boolean,
    modifier: SubspaceModifier = SubspaceModifier,
    enter: SpatialEnterTransition = SpatialTransitionDefaults.DefaultEnter,
    exit: SpatialExitTransition = SpatialTransitionDefaults.DefaultExit,
    content: @Composable @SubspaceComposable AnimatedSpatialVisibilityScope.() -> Unit,
)
```

This extension function creates an [AnimatedSpatialVisibility](/jetpack-compose/androidx.xr.compose/compose/composable-functions/AnimatedSpatialVisibility) composable as a child Transition
of the given Transition. This means: 1) the enter/exit transition is now triggered by the
provided [Transition](/jetpack-compose/androidx.compose.animation/animation-core/classes/Transition)'s [targetState](/jetpack-compose/androidx.compose.animation/animation-core/classes/Transition) change. When the targetState
changes, the visibility will be derived using the [visible](/jetpack-compose/androidx.compose.foundation/foundation-layout/modifiers/visible) lambda and
[Transition.targetState](/jetpack-compose/androidx.compose.animation/animation-core/classes/Transition). 2) The enter/exit transitions, as well as any custom enter/exit
animations defined in [AnimatedSpatialVisibility](/jetpack-compose/androidx.xr.compose/compose/composable-functions/AnimatedSpatialVisibility) 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.
[Transition.currentState](/jetpack-compose/androidx.compose.animation/animation-core/classes/Transition) = [Transition.targetState](/jetpack-compose/androidx.compose.animation/animation-core/classes/Transition)), and subsequently removes the content in
the exit case.

#### Parameters

| | |
| --- | --- |
| visible | defines whether the content should be visible based on transition state T |
| modifier | modifier for the [SubspaceLayout](/jetpack-compose/androidx.xr.compose/compose/composable-functions/SubspaceLayout) created to contain the `content` |
| enter | EnterTransition(s) used for the appearing animation |
| exit | ExitTransition(s) used for the disappearing animation |
| content | Content to appear or disappear based on the visibility derived from the [Transition.targetState](/jetpack-compose/androidx.compose.animation/animation-core/classes/Transition) and the provided [visible](/jetpack-compose/androidx.compose.foundation/foundation-layout/modifiers/visible) lambda |