zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

perf[transition]: refine transition animation

This commit is contained in:
Pan 2018-05-29 14:31:55 +08:00
parent c861dd10cf
commit 6327869106
2 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/styles/transition.scss
View File

@ -11,7 +11,21 @@
opacity: 0; opacity: 0;
} }
/*fade*/ /*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);
}
/*breadcrumb transition*/
.breadcrumb-enter-active, .breadcrumb-enter-active,
.breadcrumb-leave-active { .breadcrumb-leave-active {
transition: all .5s; transition: all .5s;

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

@ -1,6 +1,6 @@
<template> <template>
<section class="app-main" style="min-height: 100%"> <section class="app-main" style="min-height: 100%">
<transition name="fade" mode="out-in"> <transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews"> <keep-alive :include="cachedViews">
<router-view></router-view> <router-view></router-view>
</keep-alive> </keep-alive>