togetherWith

public infix fun EnterTransition.togetherWith(exit: ExitTransition): ContentTransform

This creates a ContentTransform using the provided EnterTransition and exit, where the enter and exit transition will be running simultaneously. For example:

Code Examples

AnimatedContentTransitionSpecSample

@Suppress("UNUSED_VARIABLE")
fun AnimatedContentTransitionSpecSample() {
    // enum class CartState { Expanded, Collapsed }
    val transitionSpec: AnimatedContentTransitionScope<CartState>.() -> ContentTransform = {
        // Fade in with a delay so that it starts after fade out
        fadeIn(animationSpec = tween(150, delayMillis = 150))
            .togetherWith(fadeOut(animationSpec = tween(150)))
            .using(
                SizeTransform { initialSize, targetSize ->
                    // 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
                        }
                    }
                }
            )
    }
}