From e431fa97142dd3555379fb8af4ab85fefe1c1d0e Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Fri, 24 Nov 2017 14:03:56 +0800
Subject: [PATCH] refactor:add transition

---
 src/styles/index.scss      | 13 ++-----------
 src/styles/transition.scss | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 11 deletions(-)
 create mode 100644 src/styles/transition.scss

diff --git a/src/styles/index.scss b/src/styles/index.scss
index 63e989f..4e9bba9 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,5 +1,7 @@
 @import './element-ui.scss';
 @import './mixin.scss';
+@import './transition.scss';
+
 body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -45,17 +47,6 @@ a:hover {
   }
 }
 
-//vue router transition css
-.fade-enter-active,
-.fade-leave-active {
-  transition: all .2s ease
-}
-
-.fade-enter,
-.fade-leave-active {
-  opacity: 0;
-}
-
 //main-container全局样式
 .app-main{
   min-height: 100%
diff --git a/src/styles/transition.scss b/src/styles/transition.scss
new file mode 100644
index 0000000..c4d47ad
--- /dev/null
+++ b/src/styles/transition.scss
@@ -0,0 +1,32 @@
+//globl transition css
+
+/*fade*/
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.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;
+}