Permalink
Aug 29, 2018
May 2, 2018
May 2, 2018
Aug 29, 2018
May 2, 2018
Feb 10, 2019
Feb 10, 2019
May 2, 2018
May 2, 2018
Feb 10, 2019
May 2, 2018
May 2, 2018
Feb 10, 2019
May 2, 2018
May 2, 2018
Feb 10, 2019
May 2, 2018
May 2, 2018
May 2, 2018
May 2, 2018
May 2, 2018
Feb 10, 2019
May 2, 2018
Newer
100644
127 lines (116 sloc)
3.5 KB
2
import
anime
from
'animejs'
3
import
Transition
from
'react-transition-group/Transition'
4
import
TransitionGroup
from
'react-transition-group/TransitionGroup'
5
7
// to let the transitiongroup know that it can be removed from the DOM
10
const
ANIMATION_DONE_EVENT
=
'animation::done'
11
const
triggerAnimationDoneEvent
=
node
=>
12
node
.
dispatchEvent
(
new
Event
(
ANIMATION_DONE_EVENT
)
)
13
14
const
createOpacityAnimationConfig
=
animatingIn
=>
(
{
15
value
:
animatingIn
?
[
,
1
]
:
,
20
const
easing
=
'spring(1, 150, 10)'
21
22
const
animateGridIn
=
gridContainer
=>
23
anime
24
.
timeline
(
)
25
.
add
(
{
26
targets
:
gridContainer
,
27
translateX
:
[
-
1000
,
]
,
30
}
)
31
.
add
(
32
{
33
targets
:
gridContainer
.
querySelectorAll
(
'.card'
)
,
34
easing
,
35
opacity
:
createOpacityAnimationConfig
(
true
)
,
36
translateY
:
[
-
30
,
]
,
37
complete
:
(
)
=>
triggerAnimationDoneEvent
(
gridContainer
)
,
38
delay
:
anime
.
stagger
(
70
)
39
}
,
40
'-=500'
41
)
42
45
.
timeline
(
)
46
.
add
(
{
47
targets
:
gridContainer
.
querySelectorAll
(
'.card'
)
,
48
easing
,
49
opacity
:
createOpacityAnimationConfig
(
false
)
,
50
translateY
:
-
30
,
52
}
)
53
.
add
(
54
{
55
targets
:
gridContainer
,
56
translateX
:
1000
,
57
opacity
:
createOpacityAnimationConfig
(
false
)
,
58
easing
,
59
complete
:
(
)
=>
triggerAnimationDoneEvent
(
gridContainer
)
60
}
,
61
'-=1400'
62
)
63
64
const
animateCardIn
=
card
=>
65
anime
(
{
66
targets
:
card
,
68
translateY
:
[
50
,
]
,
69
complete
:
(
)
=>
triggerAnimationDoneEvent
(
card
)
,
71
}
)
72
73
const
animateCardOut
=
card
=>
74
anime
(
{
75
targets
:
card
,
76
translateY
:
-
10
,
78
complete
:
(
)
=>
triggerAnimationDoneEvent
(
card
)
,
80
}
)
81
82
const
addEndListener
=
(
node
,
done
)
=>
83
node
.
addEventListener
(
ANIMATION_DONE_EVENT
,
done
)
84
85
const
TransitionGrid
=
(
{
items
,
visible
,
removeItem
}
)
=>
{
86
// the code below makes sure we force re-mount the transition component
87
// every time it enters, to avoid the transition caching old state
88
// if someone rapidly toggles the component in and out
89
const
transitionKey
=
useRef
(
1
)
90
const
[
prevVisible
,
setPrevVisible
]
=
useState
(
visible
)
91
if
(
visible
!==
prevVisible
)
setPrevVisible
(
visible
)
92
if
(
visible
&&
!
prevVisible
)
{
93
transitionKey
.
current
+=
1
94
}
95
96
return
(
97
<
Transition
98
unmountOnExit
99
appear
100
addEndListener
=
{
addEndListener
}
101
onEnter
=
{
animateGridIn
}
102
onExit
=
{
animateGridOut
}
103
in
=
{
visible
}
104
key
=
{
transitionKey
.
current
}
105
>
106
<
ul
className
=
"grid animated-grid"
>
107
<
TransitionGroup
component
=
{
null
}
>
108
{
items
.
map
(
item
=>
(
109
<
Transition
110
key
=
{
item
}
111
onEnter
=
{
animateCardIn
}
112
onExit
=
{
animateCardOut
}
113
addEndListener
=
{
addEndListener
}
114
>
115
<
li
className
=
"card"
onClick
=
{
(
)
=>
removeItem
(
item
)
}
>
116
<
div
className
=
"close-card"
>
✕
<
/
div
>
117
<
div
>
{
item
}
<
/
div
>
118
<
/
li
>
119
<
/
Transition
>
120
)
)
}
121
<
/
TransitionGroup
>
122
<
/
ul
>
123
<
/
Transition
>
124
)
125
}
126
127
export
default
TransitionGrid