How to define a different transition for each route?

[Wysel]

Hi there. Is it possible to define a different transition for each route within a single tree or that will require a child subtree? For example I need a node to slide in from the bottom and then slide off to the left replaced with another node sliding in from the right.

Thanks

[KovalevAndrey]

Hi @Wysel, yes absolutely. You have information about the routing for which transition is running in descriptor param. You could implement something like this:

class BackStackSlider<T>(
    private val bottomRoutings: List<T> = emptyList(),
    private val transitionSpec: TransitionSpec<BackStack.TransitionState, Offset> = {
        spring(stiffness = Spring.StiffnessVeryLow)
    }
) : ModifierTransitionHandler<T, BackStack.TransitionState>() {

    @SuppressLint("ModifierFactoryExtensionFunction")
    override fun createModifier(
        modifier: Modifier,
        transition: Transition<BackStack.TransitionState>,
        descriptor: TransitionDescriptor<T, BackStack.TransitionState>
    ): Modifier = modifier.composed {
        val offset = transition.animateOffset(
            transitionSpec = transitionSpec,
            targetValueByState = {
                val width = descriptor.params.bounds.width.value
                val height = descriptor.params.bounds.height.value
                when (it) {
                    BackStack.TransitionState.CREATED -> {
                        if (bottomRoutings.contains(descriptor.element)) {
                            toOutsideBottom(height)
                        } else {
                            toOutsideRight(width)
                        }
                    }
                    BackStack.TransitionState.ACTIVE -> toCenter()
                    BackStack.TransitionState.STASHED_IN_BACK_STACK -> toOutsideLeft(width)
                    BackStack.TransitionState.DESTROYED -> toOutsideRight(width)
                }
            })

        offset {
            IntOffset(
                x = (offset.value.x * this.density).roundToInt(),
                y = (offset.value.y * this.density).roundToInt()
            )
        }
    }

    private fun toOutsideRight(width: Float) = Offset(1.0f * width, 0f)

    private fun toOutsideBottom(height: Float) = Offset(0f, 1f * height)

    private fun toOutsideLeft(width: Float) = Offset(-1.0f * width, 0f)

    private fun toCenter() = Offset(0f, 0f)
}