| <html devsite="true"> |
| <head> |
| <title>ExitTransition</title> |
| {% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} |
| {% include "_shared/_reference-head-tags.html" %} |
| </head> |
| <body> |
| <h1>ExitTransition</h1> |
| <p> |
| <pre>@<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a> public class ExitTransition</pre> |
| </p> |
| <hr> |
| <p><code><a href="/reference/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code> defines how an <code><a href="/reference/androidx/compose/animation/package-summary.html#AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a></code> Composable disappears on screen as it becomes not visible. The 3 categories of <code><a href="/reference/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code> available are:</p> |
| <ol> |
| <li> |
| <p>fade: <code><a href="/reference/androidx/compose/animation/package-summary.html#fadeOut(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">fadeOut</a></code></p> |
| </li> |
| <li> |
| <p>slide: <code><a href="/reference/androidx/compose/animation/package-summary.html#slideOut(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideOut</a></code>, <code><a href="/reference/androidx/compose/animation/package-summary.html#slideOutHorizontally(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideOutHorizontally</a></code>, <code><a href="/reference/androidx/compose/animation/package-summary.html#slideOutVertically(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideOutVertically</a></code></p> |
| </li> |
| <li> |
| <p>shrink: <code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkOut(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkOut</a></code>, <code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkHorizontally(AlignmentHorizontal,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkHorizontally</a></code>, <code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkVertically(AlignmentVertical,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkVertically</a></code></p> |
| </li> |
| </ol> |
| <p>They can be combined using plus operator, for example:</p> |
| <pre class="prettyprint"> |
| import androidx.compose.animation.AnimatedVisibility |
| import androidx.compose.animation.core.spring |
| import androidx.compose.animation.core.tween |
| import androidx.compose.animation.fadeIn |
| import androidx.compose.animation.fadeOut |
| import androidx.compose.animation.slideInHorizontally |
| import androidx.compose.animation.slideOutHorizontally |
| import androidx.compose.foundation.layout.Box |
| import androidx.compose.foundation.layout.fillMaxWidth |
| import androidx.compose.foundation.layout.requiredHeight |
| import androidx.compose.runtime.mutableStateOf |
| import androidx.compose.runtime.remember |
| |
| var visible by remember { mutableStateOf(true) } |
| AnimatedVisibility( |
| visible = visible, |
| enter = slideInHorizontally( |
| // Offsets the content by 1/3 of its width to the left, and slide towards right |
| initialOffsetX = { fullWidth -> -fullWidth / 3 }, |
| // Overwrites the default animation with tween for this slide animation. |
| animationSpec = tween(durationMillis = 200) |
| ) + fadeIn( |
| // Overwrites the default animation with tween |
| animationSpec = tween(durationMillis = 200) |
| ), |
| exit = slideOutHorizontally( |
| // Overwrites the ending position of the slide-out to 200 (pixels) to the right |
| targetOffsetX = { 200 }, |
| animationSpec = spring(stiffness = Spring.StiffnessHigh) |
| ) + fadeOut() |
| ) { |
| // Content that needs to appear/disappear goes here: |
| Box(Modifier.fillMaxWidth().requiredHeight(200.dp)) {} |
| }</pre> |
| <p><b>Note</b>: <code><a href="/reference/androidx/compose/animation/package-summary.html#fadeOut(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">fadeOut</a></code> and <code><a href="/reference/androidx/compose/animation/package-summary.html#slideOut(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideOut</a></code> do not affect the size of the <code><a href="/reference/androidx/compose/animation/package-summary.html#AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a></code> composable. In contrast, <code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkOut(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkOut</a></code> (and <code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkHorizontally(AlignmentHorizontal,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkHorizontally</a></code>, <code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkVertically(AlignmentVertical,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkVertically</a></code>) will shrink the clip bounds to reveal less and less of the content. This will automatically animate other layouts to fill in the space, very much like <code><a href="/reference/androidx/compose/animation/package-summary.html#(Modifier).animateContentSize(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function2)">animateContentSize</a></code>.</p> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">See also</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code><a href="/reference/androidx/compose/animation/package-summary.html#fadeOut(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">fadeOut</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/androidx/compose/animation/package-summary.html#slideOut(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideOut</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/androidx/compose/animation/package-summary.html#slideOutHorizontally(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideOutHorizontally</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/androidx/compose/animation/package-summary.html#slideOutVertically(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideOutVertically</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkOut(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkOut</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkHorizontally(AlignmentHorizontal,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkHorizontally</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkVertically(AlignmentVertical,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkVertically</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/androidx/compose/animation/package-summary.html#AnimatedVisibility(kotlin.Boolean,Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a></code></td> |
| <td></td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <h2>Summary</h2> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2"><h3>Nested types</h3></th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code><a href="/reference/androidx/compose/animation/ExitTransition.Companion.html">ExitTransition.Companion</a></code></td> |
| <td></td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2"><h3>Public methods</h3></th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>boolean</code></td> |
| <td> |
| <div><code><a href="/reference/androidx/compose/animation/ExitTransition.html#equals(kotlin.Any)">equals</a>(<a href="https://developer.android.com/reference/java/lang/Object.html">Object</a> other)</code></div> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>int</code></td> |
| <td> |
| <div><code><a href="/reference/androidx/compose/animation/ExitTransition.html#hashCode()">hashCode</a>()</code></div> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>final @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code></td> |
| <td> |
| <div><code><a href="/reference/androidx/compose/animation/ExitTransition.html#plus(androidx.compose.animation.ExitTransition)">plus</a>(@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/ExitTransition.html">ExitTransition</a> exit)</code></div> |
| <p>Combines different exit transitions.</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <h2>Public methods</h2> |
| <div><a name="equals-kotlin.Any-"></a><a name="equals"></a> |
| <h3 class="api-name" id="equals(kotlin.Any)">equals</h3> |
| <pre class="api-signature no-pretty-print">public boolean <a href="/reference/androidx/compose/animation/ExitTransition.html#equals(kotlin.Any)">equals</a>(<a href="https://developer.android.com/reference/java/lang/Object.html">Object</a> other)</pre> |
| </div> |
| <div><a name="hashCode--"></a><a name="hashcode"></a> |
| <h3 class="api-name" id="hashCode()">hashCode</h3> |
| <pre class="api-signature no-pretty-print">public int <a href="/reference/androidx/compose/animation/ExitTransition.html#hashCode()">hashCode</a>()</pre> |
| </div> |
| <div><a name="plus-androidx.compose.animation.ExitTransition-"></a><a name="plus"></a> |
| <h3 class="api-name" id="plus(androidx.compose.animation.ExitTransition)">plus</h3> |
| <pre class="api-signature no-pretty-print">public final @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/ExitTransition.html">ExitTransition</a> <a href="/reference/androidx/compose/animation/ExitTransition.html#plus(androidx.compose.animation.ExitTransition)">plus</a>(@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/ExitTransition.html">ExitTransition</a> exit)</pre> |
| <p>Combines different exit transitions. The order of the <code><a href="/reference/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code>s being combined does not matter, as these <code><a href="/reference/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code>s will start simultaneously.</p> |
| <pre class="prettyprint"> |
| import androidx.compose.animation.AnimatedVisibility |
| import androidx.compose.animation.expandVertically |
| import androidx.compose.animation.fadeIn |
| import androidx.compose.animation.fadeOut |
| import androidx.compose.animation.shrinkVertically |
| import androidx.compose.animation.slideInVertically |
| 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 |
| |
| 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 |
| ) + fadeIn(initialAlpha = 0.3f), |
| exit = slideOutVertically() + shrinkVertically() + fadeOut() |
| ) { |
| // Content that needs to appear/disappear goes here: |
| Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp)) |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">Parameters</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/ExitTransition.html">ExitTransition</a> exit</code></td> |
| <td> |
| <p>another <code><a href="/reference/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code> to be combined.</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </body> |
| </html> |
