IssueTracker

Jetpack Compose version: 1.7.8, 1.8.0-beta03 Jetpack Compose component used: Animation Kotlin version: 2.1.0

Sorry for the word salad title. Hopefully the code sample is clearer.

Steps to reproduce:

1. Remember a transition with SeekableTransitionState<Boolean>
2. Add an AnimatedVisibility child of that transition
3. Inside the AV's content, conditionally add an animation to the AVScope transition, i.e. by transition.animateXAsState(). Start this condition true, so that the animation is added.
4. Animate the root transition to its opposite state. isRunning should be true while either the AV's animation or the inner animation are still running.
5. While the inner animation is still running, animate the root transition back to its original state.
6. While the inner animation is still running, flip its condition to false so that it should be removed from the transition.

Observe that isRunning still returns true on the root transition as if the inner animation were still there, even though it shouldn't be.

With MutableTransitionState instead of Seekable, this does not happen; isRunning becomes false as soon as the conditional animation is removed.

Code sample:

@Composable
fun TransitionConditionalAnimationStuck(modifier: Modifier = Modifier) {
  val scope = rememberCoroutineScope()
//  val rootTransitionState = remember { MutableTransitionState(false) }
  val rootTransitionState = remember { SeekableTransitionState(false) }
  val rootTransition = rememberTransition(rootTransitionState)
  var holding by remember { mutableStateOf(false) }
  Column(modifier) {
    ToggleButton(
      checked = rootTransitionState.targetState,
      onCheckedChange = { scope.launch { rootTransitionState.animateTo(it) } },
//      onCheckedChange = { rootTransitionState.targetState = it },
    ) {
      Text("Toggle")
    }
    ToggleButton(checked = holding, onCheckedChange = { holding = it }) {
      Text("Holding: $holding")
    }
    Text("isRunning: ${rootTransition.isRunning}")
    rootTransition.AnimatedVisibility(visible = { it }) {
      Box(
        Modifier
          .size(100.dp)
          .background(Color.Blue)
      )
      if (holding) {
        transition.Hold()
      }
    }
  }
}

@Composable
fun Transition<EnterExitState>.Hold() {
  animateFloat(
    transitionSpec = { tween(durationMillis = Int.MAX_VALUE) },
    label = "Hold",
  ) { if (it == EnterExitState.Visible) 1f else 0f }
}

To repro in the sample:

1. Click "Holding" to toggle it to true
2. Click "Toggle" to make the AV visible
3. Click "Toggle" again to make the AV invisible (timing doesn't matter, as the inner animation has duration Int.MAX_VALUE
4. Wait for the visual animation to finish
5. Click "Holding" to toggle it to false

I expect the transition's isRunning to become false upon step 5, but instead it stays true. Try uncommenting the MutableTransitionState lines, which behaves as expected.