Is there a way to apply Page Transition to enter and exit lists, details, and extras?
I do not know how to make it work. I have tried to animate the AnimatedPane
content, but it has not worked.
Is it even available right now, or is it just a feature enhancement?
The AnimatedPane
Composable used in ListDetailPaneScaffold
offers enterTransition
and exitTransition
parameters that you can use.
These accept any sort of EnterTransition
or ExitTransition
, so you can build any variant of animations.
In below example, the AnimatedPane
shown as detailPane
will scale in and out the container combined with a fade animation:
detailPane = {
AnimatedPane(
modifier = Modifier,
enterTransition = scaleIn(
animationSpec = tween(220, delayMillis = 90),
initialScale = 0.2f
) + fadeIn(
animationSpec = tween(220, delayMillis = 90)
),
exitTransition = scaleOut(
animationSpec = tween(220, delayMillis = 90),
targetScale = 0.2f
) + fadeOut(
animationSpec = tween(220, delayMillis = 90)
)
) {
//...
}
},
extraPane = {
AnimatedPane(
modifier = Modifier.fillMaxSize(),
// no custom Animations provided
) {
//...
}
},
The AnimatedPane
shown as extraPane
will use the default animation, which is a horizontally sliding in / out animation.
Output: