JetBrains / compose-multiplatform

Compose Multiplatform, a modern UI framework for Kotlin that makes building performant and beautiful user interfaces easy and enjoyable.
https://jetbrains.com/lp/compose-multiplatform
Apache License 2.0
15.98k stars 1.16k forks source link

Issue with UpdateTransition AnimatedVisibility in LazyColumn #4312

Closed 456634 closed 7 months ago

456634 commented 7 months ago

Describe the bug It seems there is an issue with Transition<> and LazyColumn. To reproduce the problem, run the code and resize the window; the animation should start at 1000.dp. The right side consistently behaves as expected. However, the left side intermittently does not. I could only observe this behavior in combination with LazyColumn. When replaced with a simple Column, everything works as expected. I also tried passing the Transition directly through the function parameter, but the same behavior occurred.

Affected platforms Select one of the platforms below:

Versions

To Reproduce

val LocalTransition = compositionLocalOf<Transition<Boolean>> { error("No transition provider") }

@Composable
fun SimpleUpdateTransition() {
    BoxWithConstraints {
        val updateTransition = updateTransition(maxWidth)
        val leftTransition = updateTransition(maxWidth > 1000.dp) //.createChildTransition { it > 1000.dp }
        val rightTransition = updateTransition(maxWidth > 1000.dp) //.createChildTransition { it > 1000.dp }

        Row(
            modifier = Modifier.fillMaxSize(),
            content = {
                Box(Modifier.widthIn(0.dp, 300.dp)) {
                    CompositionLocalProvider(LocalTransition provides leftTransition) {
                        //Doesn't work
                        LazyColumn {
                            items(9) {
                                SheetContent()
                            }
                        }

                        /*Works as expected
                        Column {
                            List(9) {
                                SheetContent()
                            }
                        }
                        */
                    }
                }
                Box(Modifier.weight(1f)) { Text(text = "state: ${leftTransition.targetState}") }
                Box(Modifier.widthIn(0.dp, 300.dp)) {
                    CompositionLocalProvider(LocalTransition provides rightTransition) {
                        SheetContent()
                    }
                }
            }
        )
    }
}

@OptIn(ExperimentalAnimationApi::class)
@Composable
private fun SheetContent() {
    val updateTransition = LocalTransition.current

    updateTransition.AnimatedVisibility(
        visible = { it },
        content = {
            Box(Modifier.fillMaxWidth().height(72.dp).background(Color.DarkGray))
        }
    )
}
okushnikov commented 1 month ago

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.