11

src/pages/index.vue

@@ -53,6 +53,7 @@
     <v-container class="main-window flex-grow-1" fluid>
       <!-- 有内容的科目卡片 -->
       <div ref="gridContainer" class="grid-masonry">
+        <TransitionGroup name="grid">
           <div
             v-for="item in sortedItems"
             :key="item.key"
@@ -80,6 +81,7 @@
               </v-card-text>
             </v-card>
           </div>
+        </TransitionGroup>
       </div>
 
       <!-- 单独显示空科目 -->
@@ -98,6 +100,7 @@
           </v-btn-group>
         </template>
         <div v-else class="empty-subjects-grid">
+          <TransitionGroup name="v-list">
             <v-card
               v-for="subject in unusedSubjects"
               :key="subject.key"
@@ -114,6 +117,7 @@
                 <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 {

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;
+  }
+}