UNPKG

@proyecto26/animatable-component

Version:

Animate once, use Everywhere! 💫

proyecto26.github.io/animatable-component

proyecto26/animatable-component

63 lines (62 loc) • 3.75 kB
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
import { ANIMATIONS } from './common'; const SHADOW_DROP_DEFAULT = { easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)', fillMode: 'both' }; const SHADOW_DROP_CENTER = [ Object.assign(Object.assign({ offset: 0 }, SHADOW_DROP_DEFAULT), { boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' }), Object.assign(Object.assign({ offset: 1 }, SHADOW_DROP_DEFAULT), { boxShadow: '0 0 20px 0px rgba(0, 0, 0, 0.35)' }) ]; const SHADOW_DROP_TOP = [ Object.assign(Object.assign({ offset: 0 }, SHADOW_DROP_DEFAULT), { boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' }), Object.assign(Object.assign({ offset: 1 }, SHADOW_DROP_DEFAULT), { boxShadow: '0 -12px 20px -12px rgba(0, 0, 0, 0.35)' }) ]; const SHADOW_DROP_RIGHT = [ Object.assign(Object.assign({ offset: 0 }, SHADOW_DROP_DEFAULT), { boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' }), Object.assign(Object.assign({ offset: 1 }, SHADOW_DROP_DEFAULT), { boxShadow: '12px 0 20px -12px rgba(0, 0, 0, 0.35)' }) ]; const SHADOW_DROP_BOTTOM = [ Object.assign(Object.assign({ offset: 0 }, SHADOW_DROP_DEFAULT), { boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' }), Object.assign(Object.assign({ offset: 1 }, SHADOW_DROP_DEFAULT), { boxShadow: '0 12px 20px -12px rgba(0, 0, 0, 0.35)' }) ]; const SHADOW_DROP_LEFT = [ Object.assign(Object.assign({ offset: 0 }, SHADOW_DROP_DEFAULT), { boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' }), Object.assign(Object.assign({ offset: 1 }, SHADOW_DROP_DEFAULT), { boxShadow: '-12px 0 20px -12px rgba(0, 0, 0, 0.35)' }) ]; const SHADOW_DROP_LR = [ Object.assign(Object.assign({ offset: 0 }, SHADOW_DROP_DEFAULT), { boxShadow: '0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0)' }), Object.assign(Object.assign({ offset: 1 }, SHADOW_DROP_DEFAULT), { boxShadow: '-12px 0 20px -12px rgba(0, 0, 0, 0.35), 12px 0 20px -12px rgba(0, 0, 0, 0.35)' }) ]; const SHADOW_DROP_TB = [ Object.assign(Object.assign({ offset: 0 }, SHADOW_DROP_DEFAULT), { boxShadow: '0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0)' }), Object.assign(Object.assign({ offset: 1 }, SHADOW_DROP_DEFAULT), { boxShadow: '0 -12px 20px -12px rgba(0, 0, 0, 0.35), 0 12px 20px -12px rgba(0, 0, 0, 0.35)' }) ]; const SHADOW_DROP_TR = [ Object.assign(Object.assign({ offset: 0 }, SHADOW_DROP_DEFAULT), { boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' }), Object.assign(Object.assign({ offset: 1 }, SHADOW_DROP_DEFAULT), { boxShadow: '12px -12px 20px -12px rgba(0, 0, 0, 0.35)' }) ]; const SHADOW_DROP_BR = [ Object.assign(Object.assign({ offset: 0 }, SHADOW_DROP_DEFAULT), { boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' }), Object.assign(Object.assign({ offset: 1 }, SHADOW_DROP_DEFAULT), { boxShadow: '12px 12px 20px -12px rgba(0, 0, 0, 0.35)' }) ]; const SHADOW_DROP_BL = [ Object.assign(Object.assign({ offset: 0 }, SHADOW_DROP_DEFAULT), { boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' }), Object.assign(Object.assign({ offset: 1 }, SHADOW_DROP_DEFAULT), { boxShadow: '-12px 12px 20px -12px rgba(0, 0, 0, 0.35)' }) ]; const SHADOW_DROP_TL = [ Object.assign(Object.assign({ offset: 0 }, SHADOW_DROP_DEFAULT), { boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' }), Object.assign(Object.assign({ offset: 1 }, SHADOW_DROP_DEFAULT), { boxShadow: '-12px -12px 20px -12px rgba(0, 0, 0, 0.35)' }) ]; export default { [ANIMATIONS.SHADOW_DROP_CENTER]: SHADOW_DROP_CENTER, [ANIMATIONS.SHADOW_DROP_TOP]: SHADOW_DROP_TOP, [ANIMATIONS.SHADOW_DROP_RIGHT]: SHADOW_DROP_RIGHT, [ANIMATIONS.SHADOW_DROP_BOTTOM]: SHADOW_DROP_BOTTOM, [ANIMATIONS.SHADOW_DROP_LEFT]: SHADOW_DROP_LEFT, [ANIMATIONS.SHADOW_DROP_LR]: SHADOW_DROP_LR, [ANIMATIONS.SHADOW_DROP_TB]: SHADOW_DROP_TB, [ANIMATIONS.SHADOW_DROP_TR]: SHADOW_DROP_TR, [ANIMATIONS.SHADOW_DROP_BR]: SHADOW_DROP_BR, [ANIMATIONS.SHADOW_DROP_BL]: SHADOW_DROP_BL, [ANIMATIONS.SHADOW_DROP_TL]: SHADOW_DROP_TL };