androidandroid-jetpack-composeandroid-jetpack-compose-material3

How to apply custom Page Transition in ListDetailPaneScaffold for details and extra pane?


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?


Solution

  • 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:

    Screen Recording