testData/compose/docs/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html - platform/tools/dokka-devsite-plugin - Git at Google

 <html devsite="true">
   <head>
     <title>AnimatedContentScope</title>
 {% setvar book_path %}/reference/kotlin/androidx/_book.yaml{% endsetvar %}
 {% include "_shared/_reference-head-tags.html" %}
   </head>
   <body>
     <div id="metadata-info-block"></div>
     <h1>AnimatedContentScope</h1>
     <p>
       <pre>@<a href="/reference/kotlin/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a><br>class <a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html">AnimatedContentScope</a>&lt;S&nbsp;:&nbsp;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?&gt; : <a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Transition.Segment</a></pre>
     </p>
     <hr>
     <p><code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html">AnimatedContentScope</a></code> provides functions that are convenient and only applicable in the context of <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedContent(kotlin.Any,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.Function2)">AnimatedContent</a></code>, such as <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html#slideIntoContainer(androidx.compose.animation.AnimatedContentScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)">slideIntoContainer</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html#slideOutOfContainer(androidx.compose.animation.AnimatedContentScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)">slideOutOfContainer</a></code>.</p>
     <h2>Summary</h2>
     <div class="devsite-table-wrapper">
       <table class="responsive">
         <colgroup>
           <col width="40%">
           <col>
         </colgroup>
         <thead>
           <tr>
             <th colspan="100%"><h3>Nested types</h3></th>
           </tr>
         </thead>
         <tbody class="list">
           <tr>
             <td>
               <div><code>inline class <a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.SlideDirection.html">AnimatedContentScope.SlideDirection</a></code></div>
               <p><code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.SlideDirection.html">SlideDirection</a></code> defines the direction of the slide in/out for <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html#slideIntoContainer(androidx.compose.animation.AnimatedContentScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)">slideIntoContainer</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html#slideOutOfContainer(androidx.compose.animation.AnimatedContentScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)">slideOutOfContainer</a></code>.</p>
             </td>
           </tr>
           <tr>
             <td>
               <div><code>object <a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.SlideDirection.Companion.html">AnimatedContentScope.SlideDirection.Companion</a></code></div>
             </td>
           </tr>
         </tbody>
       </table>
     </div>
     <div class="devsite-table-wrapper">
       <table class="responsive">
         <colgroup>
           <col width="40%">
           <col>
         </colgroup>
         <thead>
           <tr>
             <th colspan="100%"><h3>Public functions</h3></th>
           </tr>
         </thead>
         <tbody class="list">
           <tr>
             <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a></code></td>
             <td>
               <div><code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html#slideIntoContainer(androidx.compose.animation.AnimatedContentScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)">slideIntoContainer</a>(<br>&nbsp;&nbsp;&nbsp;&nbsp;towards:&nbsp;<a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.SlideDirection.html">AnimatedContentScope.SlideDirection</a>,<br>&nbsp;&nbsp;&nbsp;&nbsp;animationSpec:&nbsp;<a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a>&lt;<a href="/reference/kotlin/androidx/compose/ui/unit/IntOffset.html">IntOffset</a>&gt;,<br>&nbsp;&nbsp;&nbsp;&nbsp;initialOffset:&nbsp;(offsetForFullSlide:&nbsp;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-int/index.html">Int</a>) <span style="white-space: nowrap;">-&gt;</span> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-int/index.html">Int</a><br>)</code></div>
               <p>This defines a horizontal/vertical slide-in that is specific to <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedContent(kotlin.Any,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.Function2)">AnimatedContent</a></code> from the edge of the container.</p>
             </td>
           </tr>
           <tr>
             <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code></td>
             <td>
               <div><code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html#slideOutOfContainer(androidx.compose.animation.AnimatedContentScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)">slideOutOfContainer</a>(<br>&nbsp;&nbsp;&nbsp;&nbsp;towards:&nbsp;<a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.SlideDirection.html">AnimatedContentScope.SlideDirection</a>,<br>&nbsp;&nbsp;&nbsp;&nbsp;animationSpec:&nbsp;<a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a>&lt;<a href="/reference/kotlin/androidx/compose/ui/unit/IntOffset.html">IntOffset</a>&gt;,<br>&nbsp;&nbsp;&nbsp;&nbsp;targetOffset:&nbsp;(offsetForFullSlide:&nbsp;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-int/index.html">Int</a>) <span style="white-space: nowrap;">-&gt;</span> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-int/index.html">Int</a><br>)</code></div>
               <p>This defines a horizontal/vertical exit transition to completely slide out of the <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedContent(kotlin.Any,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.Function2)">AnimatedContent</a></code> container.</p>
             </td>
           </tr>
           <tr>
             <td width="40%"><code>infix <a href="/reference/kotlin/androidx/compose/animation/ContentTransform.html">ContentTransform</a></code></td>
             <td>
               <div><code>@<a href="/reference/kotlin/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a><br><a href="/reference/kotlin/androidx/compose/animation/ContentTransform.html">ContentTransform</a>.<a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html#(androidx.compose.animation.ContentTransform).using(androidx.compose.animation.SizeTransform)">using</a>(sizeTransform:&nbsp;<a href="/reference/kotlin/androidx/compose/animation/SizeTransform.html">SizeTransform</a>?)</code></div>
               <p>Customizes the <code><a href="/reference/kotlin/androidx/compose/animation/SizeTransform.html">SizeTransform</a></code> of a given <code><a href="/reference/kotlin/androidx/compose/animation/ContentTransform.html">ContentTransform</a></code>.</p>
             </td>
           </tr>
         </tbody>
       </table>
     </div>
     <div class="devsite-table-wrapper">
       <table class="responsive">
         <colgroup>
           <col width="40%">
           <col>
         </colgroup>
         <thead>
           <tr>
             <th colspan="100%"><h3>Public properties</h3></th>
           </tr>
         </thead>
         <tbody class="list">
           <tr>
             <td width="40%"><code>open S</code></td>
             <td>
               <div><code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html#initialState()">initialState</a></code></div>
               <p>Initial state of a Transition Segment.</p>
             </td>
           </tr>
           <tr>
             <td width="40%"><code>open S</code></td>
             <td>
               <div><code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html#targetState()">targetState</a></code></div>
               <p>Target state of a Transition Segment.</p>
             </td>
           </tr>
         </tbody>
       </table>
     </div>
     <div class="devsite-table-wrapper">
       <table class="responsive" id="inhmethods">
         <thead>
           <tr>
             <th colspan="100%"><h3>Inherited functions</h3></th>
           </tr>
         </thead>
         <tbody class="list">
           <tr>
             <td><devsite-expandable><span class="expand-control">From <a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">androidx.compose.animation.core.Transition.Segment</a></span>
               <div class="devsite-table-wrapper">
                 <table class="responsive">
                   <colgroup>
                     <col width="40%">
                     <col>
                   </colgroup>
                   <tbody class="list">
                     <tr>
                       <td width="40%"><code>open&nbsp;infix <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-boolean/index.html">Boolean</a></code></td>
                       <td>
                         <div><code>S.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html#(kotlin.Any).isTransitioningTo(kotlin.Any)">isTransitioningTo</a>(targetState:&nbsp;S)</code></div>
                         <p>Returns whether the provided state matches the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html#initialState()">initialState</a></code>&& the provided <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html#(kotlin.Any).isTransitioningTo(kotlin.Any)">targetState</a></code> matches <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html#targetState()">Segment.targetState</a></code>.</p>
                       </td>
                     </tr>
                   </tbody>
                 </table>
               </div>
 </devsite-expandable>            </td>
           </tr>
         </tbody>
       </table>
     </div>
     <div class="list">
       <h2>Public functions</h2>
       <div class="api-item"><a name="slideIntoContainer(androidx.compose.animation.AnimatedContentScope.SlideDirection, androidx.compose.animation.core.FiniteAnimationSpec, kotlin.Function1)"></a><a name="slideIntoContainer-androidx.compose.animation.AnimatedContentScope.SlideDirection-androidx.compose.animation.core.FiniteAnimationSpec-kotlin.Function1-"></a><a name="slideintocontainer"></a>
         <h3 class="api-name" id="slideIntoContainer(androidx.compose.animation.AnimatedContentScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)">slideIntoContainer</h3>
         <pre class="api-signature no-pretty-print">fun&nbsp;<a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html#slideIntoContainer(androidx.compose.animation.AnimatedContentScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)">slideIntoContainer</a>(<br>&nbsp;&nbsp;&nbsp;&nbsp;towards:&nbsp;<a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.SlideDirection.html">AnimatedContentScope.SlideDirection</a>,<br>&nbsp;&nbsp;&nbsp;&nbsp;animationSpec:&nbsp;<a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a>&lt;<a href="/reference/kotlin/androidx/compose/ui/unit/IntOffset.html">IntOffset</a>&gt; = spring(
             visibilityThreshold = IntOffset.VisibilityThreshold
         ),<br>&nbsp;&nbsp;&nbsp;&nbsp;initialOffset:&nbsp;(offsetForFullSlide:&nbsp;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-int/index.html">Int</a>) <span style="white-space: nowrap;">-&gt;</span> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-int/index.html">Int</a> = { it }<br>):&nbsp;<a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a></pre>
         <p>This defines a horizontal/vertical slide-in that is specific to <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedContent(kotlin.Any,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.Function2)">AnimatedContent</a></code> from the edge of the container. The offset amount is dynamically calculated based on the current size of the <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedContent(kotlin.Any,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.Function2)">AnimatedContent</a></code> and its content alignment. This offset (may be positive or negative based on the direction of the slide) is then passed to <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html#slideIntoContainer(androidx.compose.animation.AnimatedContentScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)">initialOffset</a></code>. By default, <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html#slideIntoContainer(androidx.compose.animation.AnimatedContentScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)">initialOffset</a></code> will be using the offset calculated from the system to slide the content in. <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html#slideIntoContainer(androidx.compose.animation.AnimatedContentScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)">slideIntoContainer</a></code> is a convenient alternative to <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#slideInHorizontally(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideInHorizontally</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#slideInVertically(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideInVertically</a></code> when the incoming and outgoing content differ in size. Otherwise, it would be equivalent to <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#slideInHorizontally(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideInHorizontally</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#slideInVertically(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideInVertically</a></code> with an offset of the full width/height.</p>
         <p><code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html#slideIntoContainer(androidx.compose.animation.AnimatedContentScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)">towards</a></code> specifies the slide direction. Content can be slided into the container towards <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.SlideDirection.Companion.html#Left()">SlideDirection.Left</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.SlideDirection.Companion.html#Right()">SlideDirection.Right</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.SlideDirection.Companion.html#Up()">SlideDirection.Up</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.SlideDirection.Companion.html#Down()">SlideDirection.Down</a></code>.</p>
         <p><code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html#slideIntoContainer(androidx.compose.animation.AnimatedContentScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)">animationSpec</a></code> defines the animation that will be used to animate the slide-in.</p>
         <pre class="prettyprint">// enum class NestedMenuState { Level1, Level2, Level3 }
 // This is an example of creating a transitionSpec for navigating in a nested menu. The goal
 // is to 1) establish a z-order for different levels of the menu, and 2) imply a spatial
 // order between the menus via the different slide direction when navigating to child menu vs
 // parent menu. See the demos directory of the source code for a full demo.
 val transitionSpec: AnimatedContentScope&lt;NestedMenuState&gt;.() -&gt; ContentTransform = {
     if (initialState &lt; targetState) {
         // Going from parent menu to child menu, slide towards left
         slideIntoContainer(towards = SlideDirection.Left) with
             // Slide the parent out by 1/2 the amount required to be completely
             // out of the bounds. This creates a sense of child menu catching up. Since
             // the child menu has a higher z-order, it will cover the parent meu as it
             // comes in.
             slideOutOfContainer(
                 towards = SlideDirection.Left,
                 targetOffset = { offsetForFullSlide -&gt; offsetForFullSlide / 2 }
             )
     } else {
         // Going from child menu to parent menu, slide towards right.
         // Slide parent by half amount compared to child menu to create an interesting
         // parallax visual effect.
         slideIntoContainer(
             towards = SlideDirection.Right,
             initialOffset = { offsetForFullSlide -&gt; offsetForFullSlide / 2 }
         ) with
             slideOutOfContainer(towards = SlideDirection.Right)
     }.apply {
         // Here we can specify the zIndex for the target (i.e. incoming) content.
         targetContentZIndex = when (targetState) {
             NestedMenuState.Level1 -&gt; 1f
             NestedMenuState.Level2 -&gt; 2f
             NestedMenuState.Level3 -&gt; 3f
         }
     }
 }</pre>
         <div class="devsite-table-wrapper">
           <table class="responsive">
             <colgroup>
               <col width="40%">
               <col>
             </colgroup>
             <thead>
               <tr>
                 <th colspan="100%">See also</th>
               </tr>
             </thead>
             <tbody class="list">
               <tr>
                 <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedContent(kotlin.Any,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.Function2)">AnimatedContent</a></code></td>
                 <td></td>
               </tr>
               <tr>
                 <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#slideInHorizontally(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideInHorizontally</a></code></td>
                 <td></td>
               </tr>
               <tr>
                 <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#slideInVertically(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideInVertically</a></code></td>
                 <td></td>
               </tr>
             </tbody>
           </table>
         </div>
       </div>
       <div class="api-item"><a name="slideOutOfContainer(androidx.compose.animation.AnimatedContentScope.SlideDirection, androidx.compose.animation.core.FiniteAnimationSpec, kotlin.Function1)"></a><a name="slideOutOfContainer-androidx.compose.animation.AnimatedContentScope.SlideDirection-androidx.compose.animation.core.FiniteAnimationSpec-kotlin.Function1-"></a><a name="slideoutofcontainer"></a>
         <h3 class="api-name" id="slideOutOfContainer(androidx.compose.animation.AnimatedContentScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)">slideOutOfContainer</h3>
         <pre class="api-signature no-pretty-print">fun&nbsp;<a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html#slideOutOfContainer(androidx.compose.animation.AnimatedContentScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)">slideOutOfContainer</a>(<br>&nbsp;&nbsp;&nbsp;&nbsp;towards:&nbsp;<a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.SlideDirection.html">AnimatedContentScope.SlideDirection</a>,<br>&nbsp;&nbsp;&nbsp;&nbsp;animationSpec:&nbsp;<a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a>&lt;<a href="/reference/kotlin/androidx/compose/ui/unit/IntOffset.html">IntOffset</a>&gt; = spring(
             visibilityThreshold = IntOffset.VisibilityThreshold
         ),<br>&nbsp;&nbsp;&nbsp;&nbsp;targetOffset:&nbsp;(offsetForFullSlide:&nbsp;<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-int/index.html">Int</a>) <span style="white-space: nowrap;">-&gt;</span> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-int/index.html">Int</a> = { it }<br>):&nbsp;<a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a></pre>
         <p>This defines a horizontal/vertical exit transition to completely slide out of the <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedContent(kotlin.Any,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.Function2)">AnimatedContent</a></code> container. The offset amount is dynamically calculated based on the current size of the <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedContent(kotlin.Any,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.Function2)">AnimatedContent</a></code> and the new target size. This offset gets passed to <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html#slideOutOfContainer(androidx.compose.animation.AnimatedContentScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)">targetOffset</a></code> lambda. By default, <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html#slideOutOfContainer(androidx.compose.animation.AnimatedContentScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)">targetOffset</a></code> uses this offset as is, but it can be customized to slide a distance based on the offset. <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html#slideOutOfContainer(androidx.compose.animation.AnimatedContentScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)">slideOutOfContainer</a></code> is a convenient alternative to <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#slideOutHorizontally(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideOutHorizontally</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#slideOutVertically(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideOutVertically</a></code> when the incoming and outgoing content differ in size. Otherwise, it would be equivalent to <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#slideOutHorizontally(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideOutHorizontally</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#slideOutVertically(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideOutVertically</a></code> with an offset of the full width/height.</p>
         <p><code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html#slideOutOfContainer(androidx.compose.animation.AnimatedContentScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)">towards</a></code> specifies the slide direction. Content can be slided out of the container towards <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.SlideDirection.Companion.html#Left()">SlideDirection.Left</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.SlideDirection.Companion.html#Right()">SlideDirection.Right</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.SlideDirection.Companion.html#Up()">SlideDirection.Up</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.SlideDirection.Companion.html#Down()">SlideDirection.Down</a></code>.</p>
         <p><code><a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html#slideOutOfContainer(androidx.compose.animation.AnimatedContentScope.SlideDirection,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1)">animationSpec</a></code> defines the animation that will be used to animate the slide-out.</p>
         <pre class="prettyprint">// enum class NestedMenuState { Level1, Level2, Level3 }
 // This is an example of creating a transitionSpec for navigating in a nested menu. The goal
 // is to 1) establish a z-order for different levels of the menu, and 2) imply a spatial
 // order between the menus via the different slide direction when navigating to child menu vs
 // parent menu. See the demos directory of the source code for a full demo.
 val transitionSpec: AnimatedContentScope&lt;NestedMenuState&gt;.() -&gt; ContentTransform = {
     if (initialState &lt; targetState) {
         // Going from parent menu to child menu, slide towards left
         slideIntoContainer(towards = SlideDirection.Left) with
             // Slide the parent out by 1/2 the amount required to be completely
             // out of the bounds. This creates a sense of child menu catching up. Since
             // the child menu has a higher z-order, it will cover the parent meu as it
             // comes in.
             slideOutOfContainer(
                 towards = SlideDirection.Left,
                 targetOffset = { offsetForFullSlide -&gt; offsetForFullSlide / 2 }
             )
     } else {
         // Going from child menu to parent menu, slide towards right.
         // Slide parent by half amount compared to child menu to create an interesting
         // parallax visual effect.
         slideIntoContainer(
             towards = SlideDirection.Right,
             initialOffset = { offsetForFullSlide -&gt; offsetForFullSlide / 2 }
         ) with
             slideOutOfContainer(towards = SlideDirection.Right)
     }.apply {
         // Here we can specify the zIndex for the target (i.e. incoming) content.
         targetContentZIndex = when (targetState) {
             NestedMenuState.Level1 -&gt; 1f
             NestedMenuState.Level2 -&gt; 2f
             NestedMenuState.Level3 -&gt; 3f
         }
     }
 }</pre>
         <div class="devsite-table-wrapper">
           <table class="responsive">
             <colgroup>
               <col width="40%">
               <col>
             </colgroup>
             <thead>
               <tr>
                 <th colspan="100%">See also</th>
               </tr>
             </thead>
             <tbody class="list">
               <tr>
                 <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedContent(kotlin.Any,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.Function2)">AnimatedContent</a></code></td>
                 <td></td>
               </tr>
               <tr>
                 <td width="40%"><code><a href="/reference/kotlin/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/kotlin/androidx/compose/animation/package-summary.html#slideOutVertically(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideOutVertically</a></code></td>
                 <td></td>
               </tr>
             </tbody>
           </table>
         </div>
       </div>
       <div class="api-item"><a name="-androidx.compose.animation.ContentTransform-.using-androidx.compose.animation.SizeTransform-"></a><a name="using"></a>
         <h3 class="api-name" id="(androidx.compose.animation.ContentTransform).using(androidx.compose.animation.SizeTransform)">using</h3>
         <pre class="api-signature no-pretty-print">@<a href="/reference/kotlin/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a><br>infix&nbsp;fun&nbsp;<a href="/reference/kotlin/androidx/compose/animation/ContentTransform.html">ContentTransform</a>.<a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html#(androidx.compose.animation.ContentTransform).using(androidx.compose.animation.SizeTransform)">using</a>(sizeTransform:&nbsp;<a href="/reference/kotlin/androidx/compose/animation/SizeTransform.html">SizeTransform</a>?):&nbsp;<a href="/reference/kotlin/androidx/compose/animation/ContentTransform.html">ContentTransform</a></pre>
         <p>Customizes the <code><a href="/reference/kotlin/androidx/compose/animation/SizeTransform.html">SizeTransform</a></code> of a given <code><a href="/reference/kotlin/androidx/compose/animation/ContentTransform.html">ContentTransform</a></code>. For example:</p>
         <pre class="prettyprint">
 import androidx.compose.animation.SizeTransform
 import androidx.compose.animation.core.keyframes
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.with
 import androidx.compose.ui.unit.IntSize

 // enum class CartState { Expanded, Collapsed }
 val transitionSpec: AnimatedContentScope&lt;CartState&gt;.() -&gt; ContentTransform =
     {
         // Fade in with a delay so that it starts after fade out
         fadeIn(animationSpec = tween(150, delayMillis = 150))
             .with(fadeOut(animationSpec = tween(150)))
             .using(
                 SizeTransform { initialSize, targetSize -&gt;
                     // Using different SizeTransform for different state change
                     if (CartState.Collapsed isTransitioningTo CartState.Expanded) {
                         keyframes {
                             durationMillis = 500
                             // Animate to full target width and by 200px in height at 150ms
                             IntSize(targetSize.width, initialSize.height + 200) at 150
                         }
                     } else {
                         keyframes {
                             durationMillis = 500
                             // Animate 1/2 the height without changing the width at 150ms.
                             // The width and rest of the height will be animated in the
                             // timeframe between 150ms and duration (i.e. 500ms)
                             IntSize(
                                 initialSize.width,
                                 (initialSize.height + targetSize.height) / 2
                             ) at 150
                         }
                     }
                 }
             )
     }</pre>
       </div>
     </div>
     <div class="list">
       <h2>Public properties</h2>
       <div class="api-item"><a name="getInitialState()"></a><a name="setInitialState()"></a><a name="getInitialState--"></a><a name="setInitialState--"></a>
         <h3 class="api-name" id="initialState()">initialState</h3>
         <pre class="api-signature no-pretty-print">open&nbsp;val&nbsp;<a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html#initialState()">initialState</a>:&nbsp;S</pre>
         <p>Initial state of a Transition Segment. This is the state that transition starts from.</p>
       </div>
       <div class="api-item"><a name="getTargetState()"></a><a name="setTargetState()"></a><a name="getTargetState--"></a><a name="setTargetState--"></a>
         <h3 class="api-name" id="targetState()">targetState</h3>
         <pre class="api-signature no-pretty-print">open&nbsp;val&nbsp;<a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html#targetState()">targetState</a>:&nbsp;S</pre>
         <p>Target state of a Transition Segment. This is the state that transition will end on.</p>
       </div>
     </div>
   </body>
 </html>