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