返回 slidev
transitions.css
根目录 / packages / client / styles / transitions.css
1 /* Sliding */
2 .slide-left-enter-active,
3 .slide-left-leave-active,
4 .slide-right-enter-active,
5 .slide-right-leave-active,
6 .slide-up-enter-active,
7 .slide-up-leave-active,
8 .slide-down-enter-active,
9 .slide-down-leave-active {
10 transition: all var(--slidev-transition-duration) ease;
11 }
12
13 .slide-left-enter-from,
14 .slide-right-leave-to {
15 translate: 100% 0;
16 }
17
18 .slide-left-leave-to,
19 .slide-right-enter-from {
20 translate: -100% 0;
21 }
22
23 .slide-up-enter-from,
24 .slide-down-leave-to {
25 translate: 0 100%;
26 }
27
28 .slide-up-leave-to,
29 .slide-down-enter-from {
30 translate: 0 -100%;
31 }
32
33 /* Fading */
34 .fade-enter-active,
35 .fade-leave-active {
36 transition: opacity var(--slidev-transition-duration) ease;
37 }
38
39 .fade-enter-from,
40 .fade-leave-to {
41 opacity: 0;
42 }
43
44 .fade-out-leave-active {
45 transition: opacity calc(var(--slidev-transition-duration) * 0.6) ease-out;
46 }
47
48 .fade-out-enter-active {
49 transition: opacity calc(var(--slidev-transition-duration) * 0.8) ease-in;
50 transition-delay: calc(var(--slidev-transition-duration) * 0.6);
51 }
52
53 .fade-out-enter-from,
54 .fade-out-leave-to {
55 opacity: 0;
56 }
57
57 lines CSS