I have a view that starts animating as soon as it gets visible. Enter animation is fadeIn+expandIn, exit animation is fadeOut+shrinkOut. There is a close button in the view. When it is clicked, I change the visibility to false so that exit animation is triggered. Animations works correctly unless they overlap.

However, if the close button is clicked before the enter animation completes, I see a pretty quick exit animation. I’d expect to enter animation to stop and exit animation to take over and shrink out the view from the point it is expanded gracefully.

How can I get my expected behavior working?

val visibleState = remember {
    MutableTransitionState(false).apply {
        // Start the animation immediately.
        targetState = true
    }
}
AnimatedVisibility(
    enter = fadeIn(
        animationSpec = keyframes {
            this.durationMillis = animationDuration
        },
    ) + expandIn(
        animationSpec =  keyframes {
            this.durationMillis = animationDuration
        },
    ),
    exit = fadeOut(
        animationSpec =  keyframes {
            this.durationMillis = animationDuration
        },
    ) + shrinkOut(
        animationSpec =  keyframes {
            this.durationMillis = animationDuration
        },
    ),
    visibleState = visibleState,
) {
    ...
    Button(
        onClick = {
            visibleState.targetState = false
        },
        ...
    )
}