IssueTracker

Jetpack Compose version: 1.2.0-rc03
Jetpack Compose component used: AnimatedContent
Android Studio Build: 2022.1.1. Canary 7
Kotlin version: 1.7.1

When using AnimatedContent to animate between two contents, if you interrupt during the animation and attempt to return to the previous state, the target gets the wrong animation.

Given:

var count by remember { mutableStateOf(0) }
AnimatedContent(targetState = count, transitionSpec = {
  if (targetState == 0) {
    fadeIn(tween(2000)) with slideOut(
      tween(2000),
      targetOffset = { fullSize -> IntOffset(0, fullSize.height / 2) }) + fadeOut( 
      tween(2000))
  } else {
    fadeIn(tween(2000)) with fadeOut(tween(2000))
  }
}) { state ->
  if (state == 0) {
    Box(modifier = Modifier
      .fillMaxSize()
      .background(Color.Green)
      .clickable { count++ }
    )
  } else if (state == 1) {
    Box(modifier = Modifier
      .fillMaxSize()
      .background(Color.Red)
    )
    BackHandler { count-- }
  }
}          

When starting from the green screen, starting animation to the red screen and interrupting that animation to return to green the green animation incorrectly does a slideIn() transition after the interrupt.

Expected:
The Green screen should always be fading. When we go from green to red it should be fading out. When returning back to green, because it is the targetState it should get the entering animation, which is a fadeIn() and the Red screen should be fading out.

Observed:
On interruption, the Green screen gets the exit transition, which in this case is the slideOut() and reverses it so it ends up doing a slideIn() and the Red screen fades out.

Since the targetState is always the final state of the AnimatedContent, it should always receive whatever enter transition in passed into the transitionSpec.