diff options
Diffstat (limited to 'src/styles/animations.scss')
-rw-r--r-- | src/styles/animations.scss | 50 |
1 files changed, 30 insertions, 20 deletions
diff --git a/src/styles/animations.scss b/src/styles/animations.scss index 35125dec5..dcc9690fb 100644 --- a/src/styles/animations.scss +++ b/src/styles/animations.scss | |||
@@ -1,43 +1,51 @@ | |||
1 | @import "./globals.scss"; | 1 | @import './globals.scss'; |
2 | 2 | ||
3 | // FadeIn | 3 | // FadeIn |
4 | .fadeIn-appear { opacity: .01; } | 4 | .fadeIn-appear { |
5 | opacity: 0.01; | ||
6 | } | ||
5 | 7 | ||
6 | .fadeIn-appear.fadeIn-appear-active { | 8 | .fadeIn-appear.fadeIn-appear-active { |
7 | opacity: 1; | 9 | opacity: 1; |
8 | transition: opacity .5s ease-out; | 10 | transition: opacity 0.5s ease-out; |
9 | } | 11 | } |
10 | 12 | ||
11 | .fadeIn-enter { | 13 | .fadeIn-enter { |
12 | opacity: .01; | 14 | opacity: 0.01; |
13 | transition: opacity .5s ease-out; | 15 | transition: opacity 0.5s ease-out; |
14 | } | 16 | } |
15 | 17 | ||
16 | .fadeIn-leave { opacity: 1; } | 18 | .fadeIn-leave { |
19 | opacity: 1; | ||
20 | } | ||
17 | 21 | ||
18 | .fadeIn-leave.fadeIn-leave-active { | 22 | .fadeIn-leave.fadeIn-leave-active { |
19 | opacity: .01; | 23 | opacity: 0.01; |
20 | transition: opacity 300ms ease-in; | 24 | transition: opacity 300ms ease-in; |
21 | } | 25 | } |
22 | 26 | ||
23 | // FadeIn Fast | 27 | // FadeIn Fast |
24 | .fadeIn-fast-appear { opacity: .01; } | 28 | .fadeIn-fast-appear { |
29 | opacity: 0.01; | ||
30 | } | ||
25 | 31 | ||
26 | .fadeIn-fast-appear.fadeIn-fast-appear-active { | 32 | .fadeIn-fast-appear.fadeIn-fast-appear-active { |
27 | opacity: 1; | 33 | opacity: 1; |
28 | transition: opacity .25s ease-out; | 34 | transition: opacity 0.25s ease-out; |
29 | } | 35 | } |
30 | 36 | ||
31 | .fadeIn-fast-enter { | 37 | .fadeIn-fast-enter { |
32 | opacity: .01; | 38 | opacity: 0.01; |
33 | transition: opacity .25s ease-out; | 39 | transition: opacity 0.25s ease-out; |
34 | } | 40 | } |
35 | 41 | ||
36 | .fadeIn-fast-leave { opacity: 1; } | 42 | .fadeIn-fast-leave { |
43 | opacity: 1; | ||
44 | } | ||
37 | 45 | ||
38 | .fadeIn-fast-leave.fadeIn-fast-leave-active { | 46 | .fadeIn-fast-leave.fadeIn-fast-leave-active { |
39 | opacity: .01; | 47 | opacity: 0.01; |
40 | transition: opacity .25s ease-in; | 48 | transition: opacity 0.25s ease-in; |
41 | } | 49 | } |
42 | 50 | ||
43 | // Slide down | 51 | // Slide down |
@@ -48,12 +56,12 @@ | |||
48 | 56 | ||
49 | .slideDown-appear.slideDown-appear-active { | 57 | .slideDown-appear.slideDown-appear-active { |
50 | max-height: 500px; | 58 | max-height: 500px; |
51 | transition: max-height .5s ease-out; | 59 | transition: max-height 0.5s ease-out; |
52 | } | 60 | } |
53 | 61 | ||
54 | .slideDown-enter { | 62 | .slideDown-enter { |
55 | max-height: 0; | 63 | max-height: 0; |
56 | transition: max-height .5s ease-out; | 64 | transition: max-height 0.5s ease-out; |
57 | } | 65 | } |
58 | 66 | ||
59 | // Slide up | 67 | // Slide up |
@@ -65,18 +73,20 @@ | |||
65 | .slideUp-appear.slideUp-appear-active { | 73 | .slideUp-appear.slideUp-appear-active { |
66 | opacity: 1; | 74 | opacity: 1; |
67 | transform: translateY(0px); | 75 | transform: translateY(0px); |
68 | transition: all .3s ease-out; | 76 | transition: all 0.3s ease-out; |
69 | } | 77 | } |
70 | 78 | ||
71 | .slideUp-enter { | 79 | .slideUp-enter { |
72 | opacity: 0; | 80 | opacity: 0; |
73 | transform: translateY(20px); | 81 | transform: translateY(20px); |
74 | transition: all .3s ease-out; | 82 | transition: all 0.3s ease-out; |
75 | } | 83 | } |
76 | 84 | ||
77 | .slideUp-leave { opacity: 1; } | 85 | .slideUp-leave { |
86 | opacity: 1; | ||
87 | } | ||
78 | 88 | ||
79 | .slideUp-leave.slideUp-leave-active { | 89 | .slideUp-leave.slideUp-leave-active { |
80 | opacity: .01; | 90 | opacity: 0.01; |
81 | transition: opacity 300ms ease-in; | 91 | transition: opacity 300ms ease-in; |
82 | } | 92 | } |