snippets icon indicating copy to clipboard operation
snippets copied to clipboard

The following code may encounter issues when using AnimatedVisibility, as the animation is very uneven

Open Kuki93 opened this issue 2 years ago • 3 comments



@Preview
@Composable
fun AnimatedVisibilityCookbook() {
    var visible1 by remember {
        mutableStateOf(true)
    }

    var visible2 by remember {
        mutableStateOf(true)
    }
    Row(
        modifier = Modifier.padding(top = 20.dp).fillMaxWidth(),
        horizontalArrangement = Arrangement.spacedBy(6.dp)
    ) {
        Button(
            modifier = Modifier,
            onClick = {
                visible1 = !visible1
            },
            shape = RoundedCornerShape(6.dp),
            colors = ButtonDefaults.buttonColors(containerColor = Color.White),
            contentPadding = PaddingValues(horizontal = 8.dp)
        ) {
            Text(
                text = "text",
                color = Color.Black,
                textAlign = TextAlign.Center
            )
        }
        AnimatedVisibility(
            modifier =  Modifier.weight(1f),
            visible = visible1
        ) {
            Button(
                modifier = Modifier,
                onClick = {  },
                shape = RoundedCornerShape(6.dp),
                colors =  ButtonDefaults.buttonColors(containerColor = Color.White),
                contentPadding = PaddingValues(horizontal = 8.dp)
            ) {
                Text(
                    text = "text1",
                    color = Color.Black,
                    textAlign = TextAlign.Center
                )
            }
        }
        AnimatedVisibility(
            modifier = Modifier.weight(1f),
            visible = visible2
        ) {
            Button(
                modifier = Modifier,
                onClick = {  },
                shape = RoundedCornerShape(6.dp),
                colors =  ButtonDefaults.buttonColors(containerColor = Color.White),
                contentPadding = PaddingValues(horizontal = 8.dp)
            ) {
                Text(
                    text = "text2",
                    color = Color.Black,
                    textAlign = TextAlign.Center
                )
            }
        }
    }
}

Kuki93 avatar Feb 22 '24 09:02 Kuki93

Could you attach a video of what you are seeing as an issue here?

riggaroo avatar Dec 10 '24 11:12 riggaroo

actual effect: https://github.com/user-attachments/assets/271c12e6-4bcd-43c9-9866-06792ec3f473

expected effect: https://github.com/user-attachments/assets/c747243d-bf16-45c8-a8f4-43276e81042c

Kuki93 avatar Dec 20 '24 02:12 Kuki93

Thanks, is there an error with one of the snippets? If you have the expected effect could you point to what snippet is causing this issue?

riggaroo avatar Jan 02 '25 11:01 riggaroo