From 35055c5e511be25a871f7700baeaa686861ff693 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Tue, 14 Nov 2017 10:09:32 +0800
Subject: [PATCH] style:breadcrumb add transition
---
src/styles/transition.scss | 23 +++++++++++++++++++++++
src/views/layout/components/Levelbar.vue | 2 ++
2 files changed, 25 insertions(+)
diff --git a/src/styles/transition.scss b/src/styles/transition.scss
index 5d7b636e..85c03286 100644
--- a/src/styles/transition.scss
+++ b/src/styles/transition.scss
@@ -1,4 +1,6 @@
//globl transition css
+
+/*fade*/
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.28s;
@@ -8,3 +10,24 @@
.fade-leave-active {
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;
+}
+
diff --git a/src/views/layout/components/Levelbar.vue b/src/views/layout/components/Levelbar.vue
index d452ca63..4e392583 100644
--- a/src/views/layout/components/Levelbar.vue
+++ b/src/views/layout/components/Levelbar.vue
@@ -1,9 +1,11 @@
<template>
<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'>
<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>
</el-breadcrumb-item>
+ </transition-group>
</el-breadcrumb>
</template>
--
GitLab