kamp/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-22 07:10:09 +01:00
Code

Adjusted some animation

Browse Source
This commit is contained in:
Donald Zou 2024-10-25 23:32:30 +08:00
parent a606626053
commit 5a8f2fa2be
1 changed files with 6 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/static/app/src/App.vue
View File

@ -2,6 +2,7 @@
import { RouterView } from 'vue-router'
import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
import {computed, watch} from "vue";
import {v4} from "uuid";
const store = DashboardConfigurationStore();
store.initCrossServerConfiguration();
if (window.IS_WGDASHBOARD_DESKTOP){
@ -39,7 +40,7 @@ const getActiveCrossServer = computed(() => {
</nav>
<Suspense>
<RouterView v-slot="{ Component }">
<Transition name="app" mode="out-in" type="transition">
<Transition name="app" mode="out-in" type="transition" appear>
<Component :is="Component"></Component>
</Transition>
</RouterView>
@ -49,17 +50,13 @@ const getActiveCrossServer = computed(() => {
<style scoped>
.app-enter-active,
.app-leave-active {
transition: all 0.3s cubic-bezier(0.82, 0.58, 0.17, 0.9);
}
.app-enter-from{
transform: translateY(20px);
opacity: 0;
transition: all 0.7s cubic-bezier(0.82, 0.58, 0.17, 1);
}
.app-enter-from,
.app-leave-to{
transform: translateY(-20px);
opacity: 0;
transform: scale(1.1);
}
@media screen and (min-width: 768px) {