yovinchen/guigu-oa-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf[css]: refine fade-transform

Browse Source
This commit is contained in:
Pan
2018-08-28 18:30:36 +08:00
parent d54bdc8fff
commit a91f687c2d
2 changed files with 16 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/styles/transition.scss
View File

@@ -11,6 +11,20 @@
opacity: 0; opacity: 0;
} }
/*fade-transform*/
.fade-transform-leave-active,
.fade-transform-enter-active {
transition: all .5s;
}
.fade-transform-enter {
opacity: 0;
transform: translateX(-30px);
}
.fade-transform-leave-to {
opacity: 0;
transform: translateX(30px);
}
/*fade*/ /*fade*/
.breadcrumb-enter-active, .breadcrumb-enter-active,
.breadcrumb-leave-active { .breadcrumb-leave-active {

3
src/views/layout/components/AppMain.vue
View File

@@ -1,6 +1,7 @@
<template> <template>
<section class="app-main"> <section class="app-main">
<transition name="fade" mode="out-in"> <transition name="fade-transform" mode="out-in">
<!-- or name="fade" -->
<!-- <router-view :key="key"></router-view> --> <!-- <router-view :key="key"></router-view> -->
<router-view/> <router-view/>
</transition> </transition>