main
scss 73 lines 1.66 KB
Raw
1 /* router-fade */
2 .router-fade-enter-active,
3 .router-fade-leave-active {
4 transition: opacity var(--router-transition-duration) ease-in-out;
5 }
6 .router-fade-enter-from,
7 .router-fade-leave-to {
8 opacity: 0;
9 }
10
11 /* router-fade-up */
12 .router-fade-up-enter-active,
13 .router-fade-up-leave-active {
14 transition:
15 opacity var(--router-transition-duration) ease-in-out,
16 transform var(--router-transition-duration) ease-in-out;
17 }
18 .router-fade-up-enter-from {
19 opacity: 0;
20 transform: translateY(10px);
21 }
22 .router-fade-up-leave-to {
23 opacity: 0;
24 transform: translateY(-10px);
25 }
26
27 /* router-fade-bottom */
28 .router-fade-bottom-enter-active,
29 .router-fade-bottom-leave-active {
30 transition:
31 opacity var(--router-transition-duration) ease-in-out,
32 transform var(--router-transition-duration) ease-in-out;
33 }
34 .router-fade-bottom-enter-from {
35 opacity: 0;
36 transform: translateY(-10px);
37 }
38 .router-fade-bottom-leave-to {
39 opacity: 0;
40 transform: translateY(10px);
41 }
42
43 /* router-fade-left */
44 .router-fade-left-enter-active,
45 .router-fade-left-leave-active {
46 transition:
47 opacity var(--router-transition-duration) ease-in-out,
48 transform var(--router-transition-duration) ease-in-out;
49 }
50 .router-fade-left-enter-from {
51 opacity: 0;
52 transform: translateX(10px);
53 }
54 .router-fade-left-leave-to {
55 opacity: 0;
56 transform: translateX(-10px);
57 }
58
59 /* router-fade-right */
60 .router-fade-right-enter-active,
61 .router-fade-right-leave-active {
62 transition:
63 opacity var(--router-transition-duration) ease-in-out,
64 transform var(--router-transition-duration) ease-in-out;
65 }
66 .router-fade-right-enter-from {
67 opacity: 0;
68 transform: translateX(-10px);
69 }
70 .router-fade-right-leave-to {
71 opacity: 0;
72 transform: translateX(10px);
73 }