tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 添加transition过渡动画

Browse Source 
Former-commit-id: af5bcff1c673303101e9af9f2ee671640816ce8f
This commit is contained in:
haoxr
2023-02-21 00:03:31 +08:00
parent 22704ace8b
commit df8a291d69
1 changed files with 40 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/layout/components/Sidebar/Logo.vue
View File

@@ -1,5 +1,4 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue';
import { useSettingsStore } from '@/store/modules/settings'; import { useSettingsStore } from '@/store/modules/settings';
const settingsStore = useSettingsStore(); const settingsStore = useSettingsStore();
@@ -11,31 +10,48 @@ defineProps({
} }
}); });
const logo = ref<string>( const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href);
new URL(`../../../assets/logo.png`, import.meta.url).href
);
</script> </script>
<template> <template>
<transition class="bg-gray-800 dark:bg-[var(--el-bg-color-overlay)]"> <div class="w-full h-[50px] bg-gray-800 dark:bg-[var(--el-bg-color-overlay)]">
<router-link <transition name="sidebarLogoFade">
v-if="collapse" <router-link
key="collapse" v-if="collapse"
class="h-[50px] flex items-center justify-center" key="collapse"
to="/" class="h-full w-full flex items-center justify-center"
> to="/"
<img v-if="settingsStore.sidebarLogo" :src="logo" class="w-5 h-5" /> >
<h1 v-else>vue3-element-admin</h1> <img v-if="settingsStore.sidebarLogo" :src="logo" class="w-5 h-5" />
</router-link> <span v-else class="ml-3 text-white text-sm font-bold"
>vue3-element-admin</span
>
</router-link>
<router-link <router-link
v-else v-else
key="expand" key="expand"
class="h-[50px] flex items-center justify-center" class="h-full w-full flex items-center justify-center"
to="/" to="/"
> >
<img v-if="settingsStore.sidebarLogo" :src="logo" class="w-5 h-5" /> <img v-if="settingsStore.sidebarLogo" :src="logo" class="w-5 h-5" />
<span class="ml-3 text-white text-sm font-bold">vue3-element-admin</span> <span class="ml-3 text-white text-sm font-bold"
</router-link> >vue3-element-admin</span
</transition> >
</router-link>
</transition>
</div>
</template> </template>
<style lang="scss" scoped>
// https://cn.vuejs.org/guide/built-ins/transition.html#the-transition-component
.sidebarLogoFade-enter-active {
transition: opacity 2s;
}
.sidebarLogoFade-leave-active,
.sidebarLogoFade-enter-from,
.sidebarLogoFade-leave-to {
opacity: 0;
}
</style>