From d755178b8128331982608a9e8b7f459fd92c9dd3 Mon Sep 17 00:00:00 2001
From: xfy <i@rua.plus>
Date: Fri, 15 May 2026 17:50:15 +0800
Subject: [PATCH] Add AnimatedContent slide+fade transition to MonthHeader
 month and week number text

When month or week number changes, the text slides vertically with fade:
upward for increasing values, downward for decreasing values, using
slideInVertically/slideOutVertically with tween(250).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../kotlin/plus/rua/project/ui/MonthHeader.kt | 49 ++++++++++++++++---
 1 file changed, 41 insertions(+), 8 deletions(-)

diff --git a/shared/src/commonMain/kotlin/plus/rua/project/ui/MonthHeader.kt b/shared/src/commonMain/kotlin/plus/rua/project/ui/MonthHeader.kt
index 71c9e97..54f0dd2 100644
--- a/shared/src/commonMain/kotlin/plus/rua/project/ui/MonthHeader.kt
+++ b/shared/src/commonMain/kotlin/plus/rua/project/ui/MonthHeader.kt
@@ -1,5 +1,12 @@
 package plus.rua.project.ui
 
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+import androidx.compose.animation.togetherWith
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -33,14 +40,40 @@ fun MonthHeader(
             .padding(vertical = 14.dp, horizontal = 12.dp),
         verticalAlignment = Alignment.CenterVertically
     ) {
-        Text(
-            text = "${year}年${month}月",
-            style = MaterialTheme.typography.titleLarge
-        )
+        AnimatedContent(
+            targetState = Pair(year, month),
+            transitionSpec = {
+                if (targetState.second > initialState.second) {
+                    slideInVertically(tween(250)) { -it } + fadeIn(tween(250)) togetherWith
+                        slideOutVertically(tween(250)) { it } + fadeOut(tween(250))
+                } else {
+                    slideInVertically(tween(250)) { it } + fadeIn(tween(250)) togetherWith
+                        slideOutVertically(tween(250)) { -it } + fadeOut(tween(250))
+                }
+            }
+        ) { (y, m) ->
+            Text(
+                text = "${y}年${m}月",
+                style = MaterialTheme.typography.titleLarge
+            )
+        }
         Spacer(modifier = Modifier.width(6.dp))
-        Text(
-            text = "第${weekNumber}周",
-            style = MaterialTheme.typography.bodySmall
-        )
+        AnimatedContent(
+            targetState = weekNumber,
+            transitionSpec = {
+                if (targetState > initialState) {
+                    slideInVertically(tween(250)) { -it } + fadeIn(tween(250)) togetherWith
+                        slideOutVertically(tween(250)) { it } + fadeOut(tween(250))
+                } else {
+                    slideInVertically(tween(250)) { it } + fadeIn(tween(250)) togetherWith
+                        slideOutVertically(tween(250)) { -it } + fadeOut(tween(250))
+                }
+            }
+        ) { week ->
+            Text(
+                text = "第${week}周",
+                style = MaterialTheme.typography.bodySmall
+            )
+        }
     }
 }