UNPKG

@proyecto26/animatable-component

Version:

Animate once, use Everywhere! 💫

proyecto26.github.io/animatable-component

proyecto26/animatable-component

88 lines (87 loc) • 4.98 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
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
import { ANIMATIONS } from './common'; const FLIP_DEFAULT = { easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', fillMode: 'both' }; const FLIP_HORIZONTAL_BOTTOM = [ Object.assign(Object.assign({ offset: 0 }, FLIP_DEFAULT), { transform: 'rotateX(0)' }), Object.assign(Object.assign({ offset: 1 }, FLIP_DEFAULT), { transform: 'rotateX(-180deg)' }) ]; const FLIP_HORIZONTAL_TOP = [ Object.assign(Object.assign({ offset: 0 }, FLIP_DEFAULT), { transform: 'rotateX(0)' }), Object.assign(Object.assign({ offset: 1 }, FLIP_DEFAULT), { transform: 'rotateX(180deg)' }) ]; const FLIP_HORIZONTAL_BCK = [ Object.assign(Object.assign({ offset: 0 }, FLIP_DEFAULT), { transform: 'translateZ(0) rotateX(0)' }), Object.assign(Object.assign({ offset: 1 }, FLIP_DEFAULT), { transform: 'translateZ(-260px) rotateX(180deg)' }) ]; const FLIP_HORIZONTAL_FWD = [ Object.assign(Object.assign({ offset: 0 }, FLIP_DEFAULT), { transform: 'translateZ(0) rotateX(0)' }), Object.assign(Object.assign({ offset: 1 }, FLIP_DEFAULT), { transform: 'translateZ(160px) rotateX(-180deg)' }) ]; const FLIP_VERTICAL_RIGHT = [ Object.assign(Object.assign({ offset: 0 }, FLIP_DEFAULT), { transform: 'rotateY(0)' }), Object.assign(Object.assign({ offset: 1 }, FLIP_DEFAULT), { transform: 'rotateY(180deg)' }) ]; const FLIP_VERTICAL_LEFT = [ Object.assign(Object.assign({ offset: 0 }, FLIP_DEFAULT), { transform: 'rotateY(0)' }), Object.assign(Object.assign({ offset: 1 }, FLIP_DEFAULT), { transform: 'rotateY(-180deg)' }) ]; const FLIP_VERTICAL_BCK = [ Object.assign(Object.assign({ offset: 0 }, FLIP_DEFAULT), { transform: 'translateZ(0) rotateY(0)' }), Object.assign(Object.assign({ offset: 1 }, FLIP_DEFAULT), { transform: 'translateZ(-260px) rotateY(-180deg)' }) ]; const FLIP_VERTICAL_FWD = [ Object.assign(Object.assign({ offset: 0 }, FLIP_DEFAULT), { transform: 'translateZ(0) rotateY(0)' }), Object.assign(Object.assign({ offset: 1 }, FLIP_DEFAULT), { transform: 'translateZ(160px) rotateY(180deg)' }) ]; const FLIP_DIAGONAL_1_TR = [ Object.assign(Object.assign({ offset: 0 }, FLIP_DEFAULT), { transform: 'rotate3d(1, 1, 0, 0deg)' }), Object.assign(Object.assign({ offset: 1 }, FLIP_DEFAULT), { transform: 'rotate3d(1, 1, 0, 180deg)' }) ]; const FLIP_DIAGONAL_1_BL = [ Object.assign(Object.assign({ offset: 0 }, FLIP_DEFAULT), { transform: 'rotate3d(1, 1, 0, 0deg)' }), Object.assign(Object.assign({ offset: 1 }, FLIP_DEFAULT), { transform: 'rotate3d(1, 1, 0, -180deg)' }) ]; const FLIP_DIAGONAL_1_BCK = [ Object.assign(Object.assign({ offset: 0 }, FLIP_DEFAULT), { transform: 'translateZ(0) rotate3d(1, 1, 0, 0deg)' }), Object.assign(Object.assign({ offset: 1 }, FLIP_DEFAULT), { transform: 'translateZ(-260px) rotate3d(1, 1, 0, -180deg)' }) ]; const FLIP_DIAGONAL_1_FWD = [ Object.assign(Object.assign({ offset: 0 }, FLIP_DEFAULT), { transform: 'translateZ(0) rotate3d(1, 1, 0, 0deg)' }), Object.assign(Object.assign({ offset: 1 }, FLIP_DEFAULT), { transform: 'translateZ(160px) rotate3d(1, 1, 0, 180deg)' }) ]; const FLIP_DIAGONAL_2_BR = [ Object.assign(Object.assign({ offset: 0 }, FLIP_DEFAULT), { transform: 'rotate3d(-1, 1, 0, 0deg)' }), Object.assign(Object.assign({ offset: 1 }, FLIP_DEFAULT), { transform: 'rotate3d(-1, 1, 0, 180deg)' }) ]; const FLIP_DIAGONAL_2_TL = [ Object.assign(Object.assign({ offset: 0 }, FLIP_DEFAULT), { transform: 'rotate3d(-1, 1, 0, 0deg)' }), Object.assign(Object.assign({ offset: 1 }, FLIP_DEFAULT), { transform: 'rotate3d(-1, 1, 0, -180deg)' }) ]; const FLIP_DIAGONAL_2_BCK = [ Object.assign(Object.assign({ offset: 0 }, FLIP_DEFAULT), { transform: 'translateZ(0) rotate3d(-1, 1, 0, 0deg)' }), Object.assign(Object.assign({ offset: 1 }, FLIP_DEFAULT), { transform: 'translateZ(-260px) rotate3d(-1, 1, 0, -180deg)' }) ]; const FLIP_DIAGONAL_2_FWD = [ Object.assign(Object.assign({ offset: 0 }, FLIP_DEFAULT), { transform: 'translateZ(0) rotate3d(-1, 1, 0, 0deg)' }), Object.assign(Object.assign({ offset: 1 }, FLIP_DEFAULT), { transform: 'translateZ(160px) rotate3d(-1, 1, 0, 180deg)' }) ]; export default { [ANIMATIONS.FLIP_HORIZONTAL_BOTTOM]: FLIP_HORIZONTAL_BOTTOM, [ANIMATIONS.FLIP_HORIZONTAL_TOP]: FLIP_HORIZONTAL_TOP, [ANIMATIONS.FLIP_HORIZONTAL_BCK]: FLIP_HORIZONTAL_BCK, [ANIMATIONS.FLIP_HORIZONTAL_FWD]: FLIP_HORIZONTAL_FWD, [ANIMATIONS.FLIP_VERTICAL_RIGHT]: FLIP_VERTICAL_RIGHT, [ANIMATIONS.FLIP_VERTICAL_LEFT]: FLIP_VERTICAL_LEFT, [ANIMATIONS.FLIP_VERTICAL_BCK]: FLIP_VERTICAL_BCK, [ANIMATIONS.FLIP_VERTICAL_FWD]: FLIP_VERTICAL_FWD, [ANIMATIONS.FLIP_DIAGONAL_1_TR]: FLIP_DIAGONAL_1_TR, [ANIMATIONS.FLIP_DIAGONAL_1_BL]: FLIP_DIAGONAL_1_BL, [ANIMATIONS.FLIP_DIAGONAL_1_BCK]: FLIP_DIAGONAL_1_BCK, [ANIMATIONS.FLIP_DIAGONAL_1_FWD]: FLIP_DIAGONAL_1_FWD, [ANIMATIONS.FLIP_DIAGONAL_2_BR]: FLIP_DIAGONAL_2_BR, [ANIMATIONS.FLIP_DIAGONAL_2_TL]: FLIP_DIAGONAL_2_TL, [ANIMATIONS.FLIP_DIAGONAL_2_BCK]: FLIP_DIAGONAL_2_BCK, [ANIMATIONS.FLIP_DIAGONAL_2_FWD]: FLIP_DIAGONAL_2_FWD };