1 | @mixin transform {
|
2 | transform: translate3d(0, 0, 0);
|
3 | }
|
4 |
|
5 | @keyframes #{$rt-namespace}__slideInRight {
|
6 | from {
|
7 | transform: translate3d(110%, 0, 0);
|
8 | visibility: visible;
|
9 | }
|
10 | to {
|
11 | @include transform;
|
12 | }
|
13 | }
|
14 |
|
15 | @keyframes #{$rt-namespace}__slideInLeft {
|
16 | from {
|
17 | transform: translate3d(-110%, 0, 0);
|
18 | visibility: visible;
|
19 | }
|
20 | to {
|
21 | @include transform;
|
22 | }
|
23 | }
|
24 |
|
25 | @keyframes #{$rt-namespace}__slideInUp {
|
26 | from {
|
27 | transform: translate3d(0, 110%, 0);
|
28 | visibility: visible;
|
29 | }
|
30 | to {
|
31 | @include transform;
|
32 | }
|
33 | }
|
34 |
|
35 | @keyframes #{$rt-namespace}__slideInDown {
|
36 | from {
|
37 | transform: translate3d(0, -110%, 0);
|
38 | visibility: visible;
|
39 | }
|
40 | to {
|
41 | @include transform;
|
42 | }
|
43 | }
|
44 |
|
45 | @keyframes #{$rt-namespace}__slideOutRight {
|
46 | from {
|
47 | @include transform;
|
48 | }
|
49 | to {
|
50 | visibility: hidden;
|
51 | transform: translate3d(110%, 0, 0);
|
52 | }
|
53 | }
|
54 |
|
55 | @keyframes #{$rt-namespace}__slideOutLeft {
|
56 | from {
|
57 | @include transform;
|
58 | }
|
59 | to {
|
60 | visibility: hidden;
|
61 | transform: translate3d(-110%, 0, 0);
|
62 | }
|
63 | }
|
64 |
|
65 | @keyframes #{$rt-namespace}__slideOutDown {
|
66 | from {
|
67 | @include transform;
|
68 | }
|
69 | to {
|
70 | visibility: hidden;
|
71 | transform: translate3d(0, 500px, 0);
|
72 | }
|
73 | }
|
74 |
|
75 | @keyframes #{$rt-namespace}__slideOutUp {
|
76 | from {
|
77 | @include transform;
|
78 | }
|
79 | to {
|
80 | visibility: hidden;
|
81 | transform: translate3d(0, -500px, 0);
|
82 | }
|
83 | }
|
84 |
|
85 | .#{$rt-namespace}__slide-enter {
|
86 | &--top-left,
|
87 | &--bottom-left {
|
88 | animation-name: #{$rt-namespace}__slideInLeft;
|
89 | }
|
90 | &--top-right,
|
91 | &--bottom-right {
|
92 | animation-name: #{$rt-namespace}__slideInRight;
|
93 | }
|
94 | &--top-center {
|
95 | animation-name: #{$rt-namespace}__slideInDown;
|
96 | }
|
97 | &--bottom-center {
|
98 | animation-name: #{$rt-namespace}__slideInUp;
|
99 | }
|
100 | }
|
101 |
|
102 | .#{$rt-namespace}__slide-exit {
|
103 | &--top-left,
|
104 | &--bottom-left {
|
105 | animation-name: #{$rt-namespace}__slideOutLeft;
|
106 | }
|
107 | &--top-right,
|
108 | &--bottom-right {
|
109 | animation-name: #{$rt-namespace}__slideOutRight;
|
110 | }
|
111 | &--top-center {
|
112 | animation-name: #{$rt-namespace}__slideOutUp;
|
113 | }
|
114 | &--bottom-center {
|
115 | animation-name: #{$rt-namespace}__slideOutDown;
|
116 | }
|
117 | } |
\ | No newline at end of file |