donaldzou/WGDashboard
1
1
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-12-28 01:46:01 +08:00
Code Issues Projects Releases Packages Wiki Activity

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