diff --git a/src/pages/index.vue b/src/pages/index.vue
index 14de536..3b45949 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -53,33 +53,35 @@
     <v-container class="main-window flex-grow-1" fluid>
       <!-- 有内容的科目卡片 -->
       <div ref="gridContainer" class="grid-masonry">
-        <div
-          v-for="item in sortedItems"
-          :key="item.key"
-          class="grid-item"
-          :style="{
-            'grid-row-end': `span ${item.rowSpan}`,
-            order: item.order,
-          }"
-        >
-          <v-card
-            border
-            height="100%"
-            @click="!isEditingDisabled && openDialog(item.key)"
+        <TransitionGroup name="grid">
+          <div
+            v-for="item in sortedItems"
+            :key="item.key"
+            class="grid-item"
+            :style="{
+              'grid-row-end': `span ${item.rowSpan}`,
+              order: item.order,
+            }"
           >
-            <v-card-title>{{ item.name }}</v-card-title>
-            <v-card-text :style="state.contentStyle">
-              <v-list>
-                <v-list-item
-                  v-for="text in splitPoint(item.content)"
-                  :key="text"
-                >
-                  {{ text }}
-                </v-list-item>
-              </v-list>
-            </v-card-text>
-          </v-card>
-        </div>
+            <v-card
+              border
+              height="100%"
+              @click="!isEditingDisabled && openDialog(item.key)"
+            >
+              <v-card-title>{{ item.name }}</v-card-title>
+              <v-card-text :style="state.contentStyle">
+                <v-list>
+                  <v-list-item
+                    v-for="text in splitPoint(item.content)"
+                    :key="text"
+                  >
+                    {{ text }}
+                  </v-list-item>
+                </v-list>
+              </v-card-text>
+            </v-card>
+          </div>
+        </TransitionGroup>
       </div>
 
       <!-- 单独显示空科目 -->
@@ -98,22 +100,24 @@
           </v-btn-group>
         </template>
         <div v-else class="empty-subjects-grid">
-          <v-card
-            v-for="subject in unusedSubjects"
-            :key="subject.key"
-            border
-            class="empty-subject-card"
-            :disabled="isEditingDisabled"
-            @click="openDialog(subject.key)"
-          >
-            <v-card-title class="text-subtitle-1">
-              {{ subject.name }}
-            </v-card-title>
-            <v-card-text class="text-center">
-              <v-icon size="small" color="grey"> mdi-plus </v-icon>
-              <div class="text-caption text-grey">点击添加作业</div>
-            </v-card-text>
-          </v-card>
+          <TransitionGroup name="v-list">
+            <v-card
+              v-for="subject in unusedSubjects"
+              :key="subject.key"
+              border
+              class="empty-subject-card"
+              :disabled="isEditingDisabled"
+              @click="openDialog(subject.key)"
+            >
+              <v-card-title class="text-subtitle-1">
+                {{ subject.name }}
+              </v-card-title>
+              <v-card-text class="text-center">
+                <v-icon size="small" color="grey"> mdi-plus </v-icon>
+                <div class="text-caption text-grey">点击添加作业</div>
+              </v-card-text>
+            </v-card>
+          </TransitionGroup>
         </div>
       </div>
     </v-container>
@@ -292,6 +296,7 @@ import dataProvider from "@/utils/dataProvider";
 import { getSetting, watchSettings, setSetting } from "@/utils/settings";
 import { useDisplay } from "vuetify";
 import "../styles/index.scss";
+import "../styles/transitions.scss";  // 添加新的样式导入
 import { debounce, throttle } from "@/utils/debounce";
 
 export default {
diff --git a/src/styles/transitions.scss b/src/styles/transitions.scss
new file mode 100644
index 0000000..dfb049a
--- /dev/null
+++ b/src/styles/transitions.scss
@@ -0,0 +1,125 @@
+// Material Design 3 动画曲线
+$emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
+$emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);
+$standard-easing: cubic-bezier(0.2, 0.0, 0, 1.0);
+$standard-decelerate: cubic-bezier(0.0, 0.0, 0.0, 1.0);
+$standard-accelerate: cubic-bezier(0.3, 0.0, 1.0, 1.0);
+
+// 网格项目的进入和离开动画
+.grid-item {
+  transition: transform 400ms $emphasized-decelerate,
+              opacity 200ms $standard-easing;
+  will-change: transform, opacity;
+  backface-visibility: hidden;
+
+  &.v-enter-active {
+    transition: transform 400ms $emphasized-decelerate,
+                opacity 250ms $standard-easing;
+  }
+
+  &.v-move {
+    transition: transform 400ms $emphasized-decelerate;
+    z-index: 1;
+  }
+
+  &.v-leave-active {
+    position: absolute !important;
+    transition: transform 300ms $emphasized-accelerate,
+                opacity 200ms $standard-accelerate;
+  }
+
+  &.v-enter-from,
+  &.v-leave-to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+// 空科目卡片动画
+.empty-subject-card {
+  transition: all 250ms $standard-easing;
+
+  &:hover {
+    transform: translateY(-4px) scale(1.02);
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
+  }
+}
+
+// 列表项目动画
+.v-list-enter-active {
+  transition: all 400ms $emphasized-decelerate;
+}
+
+.v-list-leave-active {
+  transition: all 300ms $emphasized-accelerate;
+}
+
+.v-list-enter-from,
+.v-list-leave-to {
+  opacity: 0;
+  transform: translateX(-24px);
+}
+
+// 出勤数据变化动画
+.attendance-area {
+  h2, h3 {
+    transition: all 300ms $standard-easing;
+  }
+}
+
+// 卡片展开收起动画
+.v-card {
+  transition: all 400ms $emphasized-decelerate;
+
+  &:active {
+    transform: scale(0.98);
+    transition-duration: 100ms;
+  }
+}
+
+// 修改对话框过渡动画 - 移除点击波纹效果
+.v-dialog {
+  &::before {
+    display: none !important;
+  }
+}
+
+// 对话框过渡动画
+.v-dialog {
+  // 禁用原生点击波纹效果
+  &::before,
+  &::after {
+    display: none !important;
+  }
+
+  // 禁用卡片点击效果
+  .v-card {
+    transition: none;
+
+    &:active {
+      transform: none;
+    }
+  }
+}
+
+// 保持对话框本身的过渡动画
+.v-dialog-transition-enter-active {
+  transition: transform 400ms $emphasized-decelerate,
+              opacity 300ms $standard-easing;
+}
+
+.v-dialog-transition-leave-active {
+  transition: transform 250ms $emphasized-accelerate,
+              opacity 200ms $standard-accelerate;
+}
+
+// 按钮状态变化动画
+.v-btn {
+  transition: background-color 250ms $standard-easing,
+              transform 200ms $emphasized-decelerate;
+
+  &:active {
+    transform: scale(0.96);
+    transition-duration: 100ms;
+  }
+}