-
Notifications
You must be signed in to change notification settings - Fork 0
/
scss-react-transition.scss
122 lines (110 loc) · 3.01 KB
/
scss-react-transition.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
@function stripUnit($number) {
@if type-of($number) == 'number' and not unitless($number) {
@return $number / ($number * 0 + 1);
}
@return $number;
}
@function split($string, $separator) {
$split-arr: ();
$index: str-index($string, $separator);
@while $index != null {
$item: str-slice($string, 1, $index - 1);
$split-arr: append($split-arr, $item);
$string: str-slice($string, $index + 1);
$index: str-index($string, $separator);
}
$split-arr: append($split-arr, $string);
@return $split-arr;
}
@function classify($class) {
$selectors: (
'.',
'#'
);
@if not index($selectors, str-slice($class, 1, 1)) {
$class: '.#{$class}';
}
@return $class;
}
@function millify($num) {
@if unitless($num) {
$num: #{$num}ms;
}
@return $num;
}
@function normalizeArgs($list){
$newList: ();
@for $i from 1 through 4 {
@if length($list) >= $i {
$newList: append($newList, nth($list, $i));
} @else if $i == 3 {
$newList: append($newList, nth($list, 2));
} @else if $i == 4 and not (length($list) >= 3 and nth($list, 3) == null) {
$newList: append($newList, nth($list, 1));
} @else {
$newList: append($newList, null);
}
}
@return $newList;
}
@mixin transition($classes, $props, $times: 150ms, $eases: ease, $important:null) {
$ease1: nth($eases, 1);
$ease2: '';
@if length($eases) < 2 {
$ease2: nth($eases, 1);
} @else {
$ease2: nth($eases, 2);
}
$time1: millify(nth($times, 1));
$time2: '';
@if length($times) < 2 {
$time2: millify(nth($times, 1));
} @else {
$time2: millify(nth($times, 2));
}
@if type-of($classes) == 'string' {
$classes: split($classes, ' ');
}
$class: classify(nth($classes, 1));
$enterClass: #{$class}-enter;
$enterActiveClass: #{$class}-enter#{$class}-enter-active;
$exitClass: #{'#{$class}-exit, #{$class}-leave'};
$exitActiveClass: #{'#{$class}-exit#{$class}-exit-active, #{$class}-leave#{$class}-leave-active'};
@if length($classes) > 1 {
@for $i from 2 through length($classes) {
$class: classify(nth($classes, $i));
$enterClass: append($enterClass, #{', #{$class}-enter'});
$enterActiveClass: append(
$enterActiveClass,
#{', #{$class}-enter#{$class}-enter-active'}
);
$exitClass: append($exitClass, #{', #{$class}-exit, #{$class}-leave'});
$exitActiveClass: append(
$exitActiveClass,
#{', #{$class}-exit#{$class}-exit-active, #{$class}-leave#{$class}-leave-active'}
);
}
}
#{$enterClass} {
@each $prop, $value in $props {
#{$prop}: nth(normalizeArgs($value), 1);
}
}
#{$enterActiveClass} {
@each $prop, $value in $props {
#{$prop}: nth(normalizeArgs($value), 2);
}
transition: $time1 $ease1;
}
#{$exitClass} {
@each $prop, $value in $props {
#{$prop}: nth(normalizeArgs($value), 3);
}
}
#{$exitActiveClass} {
@each $prop, $value in $props {
#{$prop}: nth(normalizeArgs($value), 4);
}
transition: $time2 $ease2;
}
}