Ver código fonte

refactor:add transition

Pan 7 anos atrás
pai
commit
e431fa9714
2 arquivos alterados com 34 adições e 11 exclusões
  1. 2 11
      src/styles/index.scss
  2. 32 0
      src/styles/transition.scss

+ 2 - 11
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%

+ 32 - 0
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;
+}