Why .animateEnterExit() modifier is working in one case but not in other?

Question

In jetpack Compose, I was trying to use AnimatedVisibility with .animateEnterExit() modifier. But I can't understand that in one of my case, .animateEnterExit() modifer is overriding the parent's animation correctly but in second it. is not. I am unable to pinpoint the real problem behind it. I humbly request to please help me to solve this problem.

1. Composable in which, .animateEnterExit() is working perfectly fine:

   @OptIn(ExperimentalAnimationApi::class)
   @Composable
   fun CustomAnimatedVisibilityDemo(
       modifier: Modifier = Modifier
   ) {
       var visible by remember { mutableStateOf(true) }
   
       Column(
           modifier = modifier.fillMaxSize(),
           verticalArrangement = Arrangement.spacedBy(16.dp),
           horizontalAlignment = Alignment.CenterHorizontally
       ) {
           // Wrap everything inside AnimatedVisibility
           AnimatedVisibility(
               visible = visible,
               enter = fadeIn(animationSpec = tween(1000)) + slideInVertically(initialOffsetY = { -it }),
               exit = fadeOut(animationSpec = tween(1000)) + slideOutVertically(targetOffsetY = { it })
           ) {
               Column(
                   verticalArrangement = Arrangement.spacedBy(16.dp)
               ) {
                   // First Box with default parent animation (fadeIn & fadeOut)
                   Box(
                       modifier = Modifier
                           .size(200.dp)
                           .clip(RoundedCornerShape(8.dp))
                           .background(Color.Green),
                       contentAlignment = Alignment.Center
                   ) {
                       Text(text = "Fade Box")
                   }
   
                   // Second Box with a custom slide animation
                   Box(
                       modifier = Modifier
                           .size(200.dp)
                           .clip(RoundedCornerShape(8.dp))
                           .background(Color.Blue)
                           .animateEnterExit(
                               enter = expandVertically(animationSpec = tween(1200)) + fadeIn(),
                               exit = shrinkVertically(animationSpec = tween(800)) + fadeOut()
                           ),
                       contentAlignment = Alignment.Center
                   ) {
                       Text(text = "Slide Box")
                   }
               }
           }
   
           // Toggle visibility button
           Button(onClick = { visible = !visible }) {
               Text(text = "Toggle")
           }
       }
   }
   
   

2. Composable in which it is not working:

   @OptIn(ExperimentalAnimationApi::class)
   @Composable
   fun AnimateAppAndDisApp(
       modifier: Modifier = Modifier
   ) {
   
       var visible by remember { mutableStateOf(false) }
   
       Column(
           modifier = Modifier.fillMaxSize(),
           verticalArrangement = Arrangement.Center,
           horizontalAlignment = Alignment.CenterHorizontally
       ) {
           Button(onClick = { visible = !visible }) {
               Text(if (visible) "Hide" else "Show")
           }
   
           Spacer(modifier = Modifier.height(20.dp))
   
           AnimatedVisibility(
               visible = visible,
               enter = fadeIn(animationSpec = tween(1000)) + slideInVertically(initialOffsetY = { -it }),
               exit = fadeOut(animationSpec = tween(1000)) + slideOutVertically(targetOffsetY = { it })
           ) {
               Column(
                   modifier = Modifier.fillMaxWidth(),
                   horizontalAlignment = Alignment.CenterHorizontally
               ) {
                   // Default animation
                   Text("Default Animation 1")
   
                   Spacer(modifier = Modifier.height(10.dp))
   
                   // Overridden animation
                   BasicText(
                       "Custom Animation",
                       modifier = Modifier.animateEnterExit(
                           enter = expandVertically(animationSpec = tween(1200)) + fadeIn(),
                           exit = shrinkVertically(animationSpec = tween(800)) + fadeOut()
                       )
                   )
   
                   Spacer(modifier = Modifier.height(10.dp))
   
                   // Default animation
                   Text("Default Animation 2")
               }
           }
       }
   }
   
   
   

Answer 1

The BasicText does not use theming so looks like its not visible because its too small or transparent. Try adding style explicitly like below or just use Text :

 BasicText(
                "Custom Animation",
                modifier = Modifier.animateEnterExit(
                    enter = expandVertically(animationSpec = tween(1200)) + fadeIn(),
                    exit = shrinkVertically(animationSpec = tween(800)) + fadeOut()
                ),

                style = LocalTextStyle.current.copy(
                color = LocalContentColor.current,
                fontSize = 16.sp
           )