This commit is contained in:
Julian Freeman
2026-03-14 21:23:50 -04:00
parent 63b469be97
commit e7ed0fa833

View File

@@ -1,6 +1,7 @@
<template>
<div class="app-container">
<transition name="fade">
<!-- 启动屏专属过渡 -->
<transition name="layout-fade">
<SplashScreen v-if="!store.isInitialized" :status-text="store.initStatus" />
</transition>
@@ -8,7 +9,8 @@
<Sidebar />
<div class="main-content">
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<!-- 页面切换专属过渡极简快速 -->
<transition name="page-fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
@@ -74,19 +76,25 @@ body {
position: relative;
}
/* 页面切换动画 */
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.4s ease, transform 0.4s ease;
/* 1. 布局级别过渡 (Splash -> App): 优雅、大气 */
.layout-fade-enter-active,
.layout-fade-leave-active {
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-enter-from {
.layout-fade-leave-to {
opacity: 0;
transform: scale(0.98);
transform: scale(1.05);
}
.fade-leave-to {
/* 2. 页面级别过渡 (Essentials <-> Updates): 快速、响应灵敏 */
.page-fade-enter-active,
.page-fade-leave-active {
transition: opacity 0.15s ease;
}
.page-fade-enter-from,
.page-fade-leave-to {
opacity: 0;
transform: scale(1.02);
}
</style>