AnimatedContent
Common
```kotlin
@Composable
public fun AnimatedContent(
targetState: S,
modifier: Modifier = Modifier,
transitionSpec: AnimatedContentTransitionScope.() -> ContentTransform = {
(fadeIn(animationSpec = tween(220, delayMillis = 90)) +
scaleIn(initialScale = 0.92f, animationSpec = tween(220, delayMillis = 90)))
.togetherWith(fadeOut(animationSpec = tween(90)))
},
contentAlignment: Alignment = Alignment.TopStart,
label: String = "AnimatedContent",
contentKey: (targetState: S) -> Any? = { it },
content: @Composable() AnimatedContentScope.(targetState: S) -> Unit,
)
```
[AnimatedContent](/jetpack-compose/androidx.compose.animation/animation/composable-functions/AnimatedContent) is a container that automatically animates its content when `targetState`
changes. Its `content` for different target states is defined in a mapping between a target state
and a composable function.
**IMPORTANT**: The targetState parameter for the `content` lambda should *always* be taken into
account in deciding what composable function to return as the content for that state. This is
critical to ensure a successful lookup of all the incoming and outgoing content during content
transform.
When `targetState` changes, content for both new and previous targetState will be looked up
through the `content` lambda. They will go through a [ContentTransform](/jetpack-compose/androidx.compose.animation/animation/classes/ContentTransform) so that the new target
content can be animated in while the initial content animates out. Meanwhile the container will
animate its size as needed to accommodate the new content, unless [SizeTransform](/jetpack-compose/androidx.compose.animation/animation/interfaces/SizeTransform) is set to
`null`. Once the [ContentTransform](/jetpack-compose/androidx.compose.animation/animation/classes/ContentTransform) is finished, the outgoing content will be disposed.
If `targetState` is expected to mutate frequently and not all mutations should be treated as
target state change, consider defining a mapping between `targetState` and a key in `contentKey`.
As a result, transitions will be triggered when the resulting key changes. In other words, there
will be no animation when switching between `targetState`s that share the same key. By default,
the key will be the same as the targetState object.
By default, the [ContentTransform](/jetpack-compose/androidx.compose.animation/animation/classes/ContentTransform) will be a delayed [fadeIn](/jetpack-compose/androidx.compose.animation/animation/functions/fadeIn) of the target content and a delayed
[scaleIn](/jetpack-compose/androidx.compose.animation/animation/functions/scaleIn) [togetherWith](/jetpack-compose/androidx.compose.animation/animation/functions/togetherWith) a [fadeOut](/jetpack-compose/androidx.compose.animation/animation/functions/fadeOut) of the initial content, using a [SizeTransform](/jetpack-compose/androidx.compose.animation/animation/interfaces/SizeTransform) to animate
any size change of the content. This behavior can be customized using `transitionSpec`. If
desired, different [ContentTransform](/jetpack-compose/androidx.compose.animation/animation/classes/ContentTransform)s can be defined for different pairs of initial content and
target content.
[AnimatedContent](/jetpack-compose/androidx.compose.animation/animation/composable-functions/AnimatedContent) displays only the content for `targetState` when not animating. However, during
the transient content transform, there will be more than one set of content present in the
[AnimatedContent](/jetpack-compose/androidx.compose.animation/animation/composable-functions/AnimatedContent) container. It may be sometimes desired to define the positional relationship
among the different content and the overlap. This can be achieved by defining `contentAlignment`
and [zOrder][ContentTransform.targetContentZIndex]. By default, `contentAlignment` aligns all
content to [Alignment.TopStart], and the `zIndex` for all the content is 0f. __Note__: The target
content will always be placed last, therefore it will be on top of all the other content unless
zIndex is specified.
Different content in [AnimatedContent](/jetpack-compose/androidx.compose.animation/animation/composable-functions/AnimatedContent) will have access to their own [AnimatedContentScope](/jetpack-compose/androidx.compose.animation/animation/interfaces/AnimatedContentScope). This
allows content to define more local enter/exit transitions via
[AnimatedContentScope.animateEnterExit] and [AnimatedContentScope.transition]. These custom
enter/exit animations will be triggered as the content enters/leaves the container.
[label](/jetpack-compose/androidx.compose.material3/material3/components/Label) is an optional parameter to differentiate from other animations in Android Studio.
Below is an example of customizing `transitionSpec` to imply a spatial relationship between the
content for different states:
AnimatedContent
Common
```kotlin
@Composable
public fun Transition.AnimatedContent(
modifier: Modifier = Modifier,
transitionSpec: AnimatedContentTransitionScope.() -> ContentTransform = {
(fadeIn(animationSpec = tween(220, delayMillis = 90)) +
scaleIn(initialScale = 0.92f, animationSpec = tween(220, delayMillis = 90)))
.togetherWith(fadeOut(animationSpec = tween(90)))
},
contentAlignment: Alignment = Alignment.TopStart,
contentKey: (targetState: S) -> Any? = { it },
content: @Composable() AnimatedContentScope.(targetState: S) -> Unit,
)
```
[AnimatedContent](/jetpack-compose/androidx.compose.animation/animation/composable-functions/AnimatedContent) is a container that automatically animates its content when
[Transition.targetState] changes. Its `content` for different target states is defined in a
mapping between a target state and a composable function.
**IMPORTANT**: The targetState parameter for the `content` lambda should *always* be taken into
account in deciding what composable function to return as the content for that state. This is
critical to ensure a successful lookup of all the incoming and outgoing content during content
transform.
When [Transition.targetState] changes, content for both new and previous targetState will be
looked up through the `content` lambda. They will go through a [ContentTransform](/jetpack-compose/androidx.compose.animation/animation/classes/ContentTransform) so that the new
target content can be animated in while the initial content animates out. Meanwhile the container
will animate its size as needed to accommodate the new content, unless [SizeTransform](/jetpack-compose/androidx.compose.animation/animation/interfaces/SizeTransform) is set to
`null`. Once the [ContentTransform](/jetpack-compose/androidx.compose.animation/animation/classes/ContentTransform) is finished, the outgoing content will be disposed.
If [Transition.targetState] is expected to mutate frequently and not all mutations should be
treated as target state change, consider defining a mapping between [Transition.targetState] and
a key in `contentKey`. As a result, transitions will be triggered when the resulting key changes.
In other words, there will be no animation when switching between [Transition.targetState]s that
share the same key. By default, the key will be the same as the targetState object.
By default, the [ContentTransform](/jetpack-compose/androidx.compose.animation/animation/classes/ContentTransform) will be a delayed [fadeIn](/jetpack-compose/androidx.compose.animation/animation/functions/fadeIn) of the target content and a delayed
[scaleIn](/jetpack-compose/androidx.compose.animation/animation/functions/scaleIn) [togetherWith](/jetpack-compose/androidx.compose.animation/animation/functions/togetherWith) a [fadeOut](/jetpack-compose/androidx.compose.animation/animation/functions/fadeOut) of the initial content, using a [SizeTransform](/jetpack-compose/androidx.compose.animation/animation/interfaces/SizeTransform) to animate
any size change of the content. This behavior can be customized using `transitionSpec`. If
desired, different [ContentTransform](/jetpack-compose/androidx.compose.animation/animation/classes/ContentTransform)s can be defined for different pairs of initial content and
target content.
[AnimatedContent](/jetpack-compose/androidx.compose.animation/animation/composable-functions/AnimatedContent) displays only the content for [Transition.targetState] when not animating.
However, during the transient content transform, there will be more than one sets of content
present in the [AnimatedContent](/jetpack-compose/androidx.compose.animation/animation/composable-functions/AnimatedContent) container. It may be sometimes desired to define the positional
relationship among different content and the style of overlap. This can be achieved by defining
`contentAlignment` and [zOrder][ContentTransform.targetContentZIndex]. By default,
`contentAlignment` aligns all content to [Alignment.TopStart], and the `zIndex` for all the
content is 0f. __Note__: The target content will always be placed last, therefore it will be on
top of all the other content unless zIndex is specified.
Different content in [AnimatedContent](/jetpack-compose/androidx.compose.animation/animation/composable-functions/AnimatedContent) will have access to their own [AnimatedContentScope](/jetpack-compose/androidx.compose.animation/animation/interfaces/AnimatedContentScope). This
allows content to define more local enter/exit transitions via
[AnimatedContentScope.animateEnterExit] and [AnimatedContentScope.transition]. These custom
enter/exit animations will be triggered as the content enters/leaves the container.