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