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

style:breadcrumb add transition

This commit is contained in:
Pan 2017-11-14 10:09:32 +08:00
parent e0a1e249ee
commit 35055c5e51
2 changed files with 25 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/styles/transition.scss
View File

@ -1,4 +1,6 @@
//globl transition css //globl transition css
/*fade*/
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: opacity 0.28s; transition: opacity 0.28s;
@ -8,3 +10,24 @@
.fade-leave-active { .fade-leave-active {
opacity: 0; opacity: 0;
} }
/*fade*/
.breadcrumb-enter-active,
.breadcrumb-leave-active {
transition: all .5s;
}
.breadcrumb-enter,
.breadcrumb-leave-active {
opacity: 0;
transform: translateX(20px);
}
.breadcrumb-move {
transition: all .5s;
}
.breadcrumb-leave-active {
position: absolute;
}

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

@ -1,9 +1,11 @@
<template> <template>
<el-breadcrumb class="app-levelbar" separator="/"> <el-breadcrumb class="app-levelbar" separator="/">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path" v-if='item.meta.title'> <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path" v-if='item.meta.title'>
<span v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{generateTitle(item.meta.title)}}</span> <span v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{generateTitle(item.meta.title)}}</span>
<router-link v-else :to="item.redirect||item.path">{{generateTitle(item.meta.title)}}</router-link> <router-link v-else :to="item.redirect||item.path">{{generateTitle(item.meta.title)}}</router-link>
</el-breadcrumb-item> </el-breadcrumb-item>
</transition-group>
</el-breadcrumb> </el-breadcrumb>
</template> </template>