Permalink
Aug 29, 2018
May 2, 2018
May 2, 2018
May 2, 2018
May 2, 2018
May 2, 2018
May 2, 2018
May 2, 2018
May 2, 2018
May 2, 2018
May 2, 2018
May 3, 2018
Aug 29, 2018
May 3, 2018
May 2, 2018
Newer
100644
122 lines (117 sloc)
2.74 KB
1
import
React
from
'react'
2
import
{
VelocityTransitionGroup
,
velocityHelpers
}
from
'velocity-react'
3
import
'velocity-animate/velocity.ui'
4
import
animationTimings
from
'./common/animationTimings'
5
6
const
cardAnimationIn
=
velocityHelpers
.
registerEffect
(
{
7
defaultDuration
:
animationTimings
.
cardEnter
,
8
calls
:
[
9
[
10
{
11
opacity
:
[
1
,
]
,
12
translateY
:
[
,
-
20
]
,
13
translateZ
:
14
}
,
15
1
,
16
{
19
}
20
]
21
]
22
}
)
23
const
cardAnimationOut
=
velocityHelpers
.
registerEffect
(
{
24
defaultDuration
:
animationTimings
.
cardLeave
,
25
calls
:
[
26
[
27
{
28
opacity
:
[
,
1
]
,
29
translateY
:
[
20
,
]
,
30
translateZ
:
31
}
,
32
1
,
33
{
36
}
37
]
38
]
39
}
)
40
41
const
gridAnimationIn
=
velocityHelpers
.
registerEffect
(
{
42
defaultDuration
:
animationTimings
.
gridEnter
,
43
calls
:
[
44
[
45
{
46
opacity
:
[
1
,
]
,
48
translateZ
:
49
}
,
50
1
,
51
{
54
}
55
]
56
]
57
}
)
58
59
const
gridAnimationOut
=
velocityHelpers
.
registerEffect
(
{
60
defaultDuration
:
animationTimings
.
gridLeave
,
61
calls
:
[
62
[
63
{
66
}
,
67
1
,
68
{
72
}
73
]
74
]
75
}
)
76
78
return
(
79
<
VelocityTransitionGroup
80
enter
=
{
{
animation
:
gridAnimationIn
}
}
82
>
84
<
div
className
=
"animated-grid"
>
85
<
VelocityTransitionGroup
86
component
=
"ul"
87
className
=
"grid"
88
runOnMount
89
enter
=
{
{
90
animation
:
cardAnimationIn
,
91
stagger
:
animationTimings
.
cardStagger
,
92
drag
:
true
,
93
delay
:
animationTimings
.
gridEnter
94
}
}
95
// velocity react is smart about applying the end stage of the leave animation
96
// (opacity : 0) to the enter animation
97
leave
=
{
{
98
animation
:
cardAnimationOut
,
99
stagger
:
animationTimings
.
cardStagger
,
100
drag
:
true
101
}
}
102
>
103
{
items
.
map
(
item
=>
{
104
return
(
105
<
div
106
className
=
"card"
107
key
=
{
item
}
108
onClick
=
{
(
)
=>
removeItem
(
item
)
}
109
>
110
<
div
className
=
"close-card"
>
✕
<
/
div
>
111
<
div
>
{
item
}
<
/
div
>
112
<
/
div
>
113
)
114
}
)
}
115
<
/
VelocityTransitionGroup
>
116
<
/
div
>
117
)
}
118
<
/
VelocityTransitionGroup
>
119
)
120
}
121