-
-
Notifications
You must be signed in to change notification settings - Fork 209
/
animation.js
77 lines (72 loc) · 2.02 KB
/
animation.js
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
// @flow
/** */
type AnimationProperty = string | number
/**
* Shorthand for easily setting the animation property. Allows either multiple arrays with animations
* or a single animation spread over the arguments.
* @example
* // Styles as object usage
* const styles = {
* ...animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])
* }
*
* // styled-components usage
* const div = styled.div`
* ${animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])}
* `
*
* // CSS as JS Output
*
* div {
* 'animation': 'rotate 1s ease-in-out, colorchange 2s'
* }
* @example
* // Styles as object usage
* const styles = {
* ...animation('rotate', '1s', 'ease-in-out')
* }
*
* // styled-components usage
* const div = styled.div`
* ${animation('rotate', '1s', 'ease-in-out')}
* `
*
* // CSS as JS Output
*
* div {
* 'animation': 'rotate 1s ease-in-out'
* }
*/
function animation(
...args: Array<Array<AnimationProperty> | AnimationProperty>
) {
// Allow single or multiple animations passed
const multiMode = Array.isArray(args[0])
if (!multiMode && args.length > 8) {
throw new Error(
'The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation',
)
}
const code = args
.map(arg => {
if (
(multiMode && !Array.isArray(arg)) ||
(!multiMode && Array.isArray(arg))
) {
throw new Error(
"To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s')",
)
}
if (Array.isArray(arg) && arg.length > 8) {
throw new Error(
'The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation',
)
}
return Array.isArray(arg) ? arg.join(' ') : arg
})
.join(', ')
return {
animation: code,
}
}
export default animation