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 @@
1 1
 @import './element-ui.scss';
2 2
 @import './mixin.scss';
3
+@import './transition.scss';
4
+
3 5
 body {
4 6
   -moz-osx-font-smoothing: grayscale;
5 7
   -webkit-font-smoothing: antialiased;
@@ -45,17 +47,6 @@ a:hover {
45 47
   }
46 48
 }
47 49
 
48
-//vue router transition css
49
-.fade-enter-active,
50
-.fade-leave-active {
51
-  transition: all .2s ease
52
-}
53
-
54
-.fade-enter,
55
-.fade-leave-active {
56
-  opacity: 0;
57
-}
58
-
59 50
 //main-container全局样式
60 51
 .app-main{
61 52
   min-height: 100%

+ 32 - 0
src/styles/transition.scss

@@ -0,0 +1,32 @@
1
+//globl transition css
2
+
3
+/*fade*/
4
+.fade-enter-active,
5
+.fade-leave-active {
6
+  transition: opacity 0.28s;
7
+}
8
+
9
+.fade-enter,
10
+.fade-leave-active {
11
+  opacity: 0;
12
+}
13
+
14
+/*fade*/
15
+.breadcrumb-enter-active,
16
+.breadcrumb-leave-active {
17
+  transition: all .5s;
18
+}
19
+
20
+.breadcrumb-enter,
21
+.breadcrumb-leave-active {
22
+  opacity: 0;
23
+  transform: translateX(20px);
24
+}
25
+
26
+.breadcrumb-move {
27
+  transition: all .5s;
28
+}
29
+
30
+.breadcrumb-leave-active {
31
+  position: absolute;
32
+}