fix anim
This commit is contained in:
28
src/App.vue
28
src/App.vue
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user