Hi everyone, I'm doing fade out/in and slide with animation. But while doing these, the content size...

# compose

[Hatice Sarp]

Hi everyone, I'm doing fade out/in and slide with animation. But while doing these, the content size also needs to change. While fade out in the code I wrote, I slide the items under it. I am also changing the parent's content size. But the bottom item disappears without slide (near my age item in the video). Another problem is that if I slide the top group on the screen so that they do not appear on the screen and run the animation, the top group items disappear from the screen.
My code is like this:

[Hatice Sarp]

val animatedProgress by nearbyTransition.animateFloat(
    transitionSpec = {
        when {
            NearbyButtonState.IDLE isTransitioningTo NearbyButtonState.PRESSED -> {
                tween(
                    easing = LinearEasing,
                    durationMillis = 300 ,
                )
            }
            NearbyButtonState.PRESSED isTransitioningTo NearbyButtonState.IDLE -> {
                tween(
                    easing = LinearEasing,
                    durationMillis = 300 ,
                )
            }
            else -> snap()
        }
    }
) {
    when (it) {
        NearbyButtonState.IDLE -> 0f
        NearbyButtonState.PRESSED -> -260f
    }
}

val opacityProgress by nearbyTransition.animateFloat(
    transitionSpec = {
        when {
            NearbyButtonState.IDLE isTransitioningTo NearbyButtonState.PRESSED -> {
                tween(
                    easing = LinearEasing,
                    durationMillis = 300 ,
                )
            }
            NearbyButtonState.PRESSED isTransitioningTo NearbyButtonState.IDLE -> {
                tween(
                    easing = LinearEasing,
                    durationMillis = 300 ,
                )
            }
            else -> snap()
        }
    }
) {
    when (it) {
        NearbyButtonState.IDLE -> 1f
        NearbyButtonState.PRESSED -> 0f
    }
}

[Hatice Sarp]

Column(
    modifier = modifier
        .background(
            color = storyItemColor,
            shape = RoundedCornerShape(32.dp)
        )
        .padding(horizontal = 8.dp).animateContentSize().then(if(nearbyState.value == NearbyButtonState.PRESSED)  Modifier.height(220.dp) else Modifier.fillMaxWidth())
) {
    SettingsItem(
        title = stringResource("nearby"),
        modifier = modifier.clickable(onClick = {
            swipeFilterState.stateNearby = !swipeFilterState.stateNearby
                   nearbyState.value = if (nearbyState.value == NearbyButtonState.IDLE{
                         NearbyButtonState.PRESSED
                } else {
                    NearbyButtonState.IDLE 
                }
        })
    )
    Column(
        modifier = Modifier.alpha(opacityProgress)
            .fillMaxWidth()
            .background(
                color = storyItemColor,
            )
    ) {
        SettingsItem(
            title = stringResource(id = R.string.Country),
            modifier = modifier.clickable(onClick = openCountry)
        )
        Spacer(modifier = Modifier.padding(start = 12.dp))
        SettingsItem(
            title = stringResource(id = R.string.state_or_city),
            modifier = modifier.clickable(onClick = openCity)
        )
    }

    Spacer(modifier = Modifier.padding(start = 12.dp))

    Box(
        modifier = Modifier.graphicsLayer(translationY = animatedProgress).fillMaxWidth().background(
            color = storyItemColor,
    ) {
        SettingsItem(
            title = stringResource(id = R.string.NearMyAge),
            modifier = modifier
                .clickable(onClick = {
                    swipeFilterState.stateNearMyAge = !swipeFilterState.stateNearMyAge
                })
        )
    }
}

[Hatice Sarp]

Viedo.mp4

[Doris Liu]

Given that the opacity is animating correctly when the "Near my age" item disappeared immediately, I suspect the issue is not in Transition . To verify that, could you log the animatedProgress and see if what the value is around the time when the item snaps to disappearance?

The top group not showing may be a separate issue. If you could isolate both of the issues in a small project, I'm happy to take a look.

Also, I recommend checking out AnimatedVisibility, if you specify the enter/exit as expandVertically() and shrinkVeritcally() for the Column containing two items in the middle (i.e. "Country" and "State/City"), it will push down the bottom item (i.e. Near my age) for you as they appear. 🙂

[Hatice Sarp]

I tried it with AnimatedVisibility and my problem was resolved. Thank you for the answer
however, a number of elements above continue to disappear during animation.
As you said, I will open a new project and try. 🙂 @Doris Liu