Jetpack Compose: run enter and exit transitions sequentially in AnimatedContent

Question

When customizing the transition of the AnimatedContent composable, one may use the function togetherWith that runs both enter and exit transitions simultaneously.

AnimatedContent(
    targetState = animationState,
    transitionSpec = {
        fadeIn(tween(durationMillis = FadeInMillis, easing = LinearEasing)) togetherWith
            fadeOut(tween(durationMillis = FadeOutMillis, easing = LinearEasing))
    }
) { targetState ->
    ...
}

However, I would like to run the transitions sequentially, i.e. fade in a target state after an initial state completely faded out. How can one do that?

Answer 1

see AnimatedContentTransitionSpecSample

// Fade in with a delay so that it starts after fade out
fadeIn(animationSpec = tween(150, delayMillis = 150))
    .with(fadeOut(animationSpec = tween(150)))