liyanhong
/
jinjianback1.1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perf[css]: refine fade-transform

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
Show Stats 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;
}
/*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*/
.breadcrumb-enter-active,
.breadcrumb-leave-active {

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

@ -1,6 +1,7 @@
<template>
<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/>
</transition>