forked from AkkomaGang/admin-fe
perf[transition]: refine transition animation
This commit is contained in:
parent
c861dd10cf
commit
6327869106
2 changed files with 16 additions and 2 deletions
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue