Merge pull request #535 from Automattic/hamorillo/498-alttext-transit…

…ions QuickEditor: Add enter/exit transitions to AltText and AvatarSelection composables
Automattic · Jan 15, 2025 · fb62c50 · fb62c50
2 parents a8060db + 6b06712
commit fb62c50
Showing 1 changed file with 14 additions and 1 deletion.
diff --git a/...r-quickeditor/src/main/java/com/gravatar/quickeditor/ui/editor/GravatarQuickEditorPage.kt b/...r-quickeditor/src/main/java/com/gravatar/quickeditor/ui/editor/GravatarQuickEditorPage.kt
@@ -1,7 +1,11 @@
 package com.gravatar.quickeditor.ui.editor
 
+import androidx.compose.animation.AnimatedContentTransitionScope
 import androidx.compose.animation.EnterTransition
 import androidx.compose.animation.ExitTransition
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.shrinkVertically
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.navigation.NavGraphBuilder
@@ -141,7 +145,14 @@ private fun NavGraphBuilder.addAvatarPickerGraph(
         route = QuickEditorPage.EDITOR.name,
         startDestination = EditorNavDestinations.AVATAR_SELECTION.name,
     ) {
-        composable(route = EditorNavDestinations.AVATAR_SELECTION.name) {
+        composable(
+            route = EditorNavDestinations.AVATAR_SELECTION.name,
+            enterTransition = { fadeIn() },
+            popEnterTransition = { fadeIn() + expandVertically() },
+            exitTransition = {
+                slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.Start) + shrinkVertically()
+            },
+        ) {
             AvatarPicker(
                 gravatarQuickEditorParams = gravatarQuickEditorParams,
                 handleExpiredSession = handleExpiredSession,
@@ -160,6 +171,8 @@ private fun NavGraphBuilder.addAvatarPickerGraph(
                 navArgument("email") { type = NavType.StringType },
                 navArgument("avatarId") { type = NavType.StringType },
             ),
+            exitTransition = { slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.End) },
+            enterTransition = { slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.Start) },
         ) {
             val email = requireNotNull(it.arguments?.getString("email"))
             val avatarId = requireNotNull(it.arguments?.getString("avatarId"))