Permalink
Aug 29, 2018
May 2, 2018
Aug 29, 2018
May 2, 2018
May 2, 2018
May 2, 2018
May 2, 2018
May 2, 2018
May 2, 2018
May 2, 2018
Aug 29, 2018
May 2, 2018
May 2, 2018
May 2, 2018
May 2, 2018
May 2, 2018
May 2, 2018
Aug 29, 2018
May 2, 2018
May 2, 2018
May 2, 2018
May 2, 2018
May 2, 2018
Newer
100644
127 lines (118 sloc)
3.54 KB
1
import
React
from
'react'
2
import
anime
from
'animejs'
3
import
animationTimings
from
'./common/animationTimings'
4
import
Transition
from
'react-transition-group/Transition'
5
import
TransitionGroup
from
'react-transition-group/TransitionGroup'
6
7
// we will trigger an event on the actual grid node after the exit animation completes
8
// to let the transitiongroup know that it can be removed from the DOM
10
// to the JavaScript animation, as far as I can tell
11
const
ANIMATION_DONE_EVENT
=
'animation::done'
12
const
triggerAnimationDoneEvent
=
node
=>
13
node
.
dispatchEvent
(
new
Event
(
ANIMATION_DONE_EVENT
)
)
14
15
// cache current animation so that it can be interrupted if necessary
16
let
currentAnimation
=
null
17
const
clearCurrentAnimation
=
(
)
=>
currentAnimation
&&
currentAnimation
.
pause
(
)
18
26
clearCurrentAnimation
(
)
28
currentAnimation
=
anime
29
.
timeline
(
)
30
.
add
(
{
31
targets
:
cards
,
32
opacity
:
,
33
duration
:
1
34
}
)
35
.
add
(
{
36
targets
:
gridContainer
,
37
translateX
:
[
-
1000
,
]
,
39
duration
:
animationTimings
.
gridEnter
40
}
)
41
.
add
(
{
42
targets
:
cards
,
43
duration
:
800
,
45
translateY
:
[
-
30
,
]
,
46
complete
:
(
)
=>
triggerAnimationDoneEvent
(
gridContainer
)
,
48
}
)
49
}
50
52
clearCurrentAnimation
(
)
53
const
cards
=
gridContainer
.
querySelectorAll
(
'.card'
)
54
gridContainer
.
style
.
height
=
gridContainer
.
offsetHeight
+
'px'
55
currentAnimation
=
anime
56
.
timeline
(
)
57
.
add
(
{
58
targets
:
cards
,
59
duration
:
700
,
61
translateY
:
-
30
,
62
delay
:
(
el
,
i
)
=>
i
*
100
63
}
)
64
.
add
(
{
65
targets
:
gridContainer
,
66
translateX
:
1000
,
68
duration
:
animationTimings
.
gridLeave
,
69
complete
:
(
)
=>
triggerAnimationDoneEvent
(
gridContainer
)
,
71
}
)
72
}
73
74
const
animateCardIn
=
card
=>
75
anime
(
{
76
targets
:
card
,
78
translateY
:
[
50
,
]
,
79
complete
:
(
)
=>
triggerAnimationDoneEvent
(
card
)
,
80
duration
:
animationTimings
.
cardEnter
81
}
)
82
83
const
animateCardOut
=
card
=>
84
anime
(
{
85
targets
:
card
,
86
translateY
:
-
10
,
88
complete
:
(
)
=>
triggerAnimationDoneEvent
(
card
)
,
89
duration
:
animationTimings
.
cardLeave
90
}
)
91
92
const
TransitionGrid
=
props
=>
{
93
return
(
94
<
Transition
95
unmountOnExit
96
appear
97
addEndListener
=
{
(
node
,
done
)
=>
98
node
.
addEventListener
(
ANIMATION_DONE_EVENT
,
done
)
99
}
100
onEnter
=
{
animateGridIn
}
101
onExit
=
{
animateGridOut
}
103
>
104
<
ul
className
=
"grid animated-grid"
>
105
<
TransitionGroup
component
=
{
null
}
>
107
<
Transition
108
key
=
{
item
}
109
onEnter
=
{
animateCardIn
}
110
onExit
=
{
animateCardOut
}
114
>
115
<
li
className
=
"card"
onClick
=
{
(
)
=>
props
.
removeItem
(
item
)
}
>
116
<
div
className
=
"close-card"
>
✕
<
/
div
>
118
<
/
li
>
119
<
/
Transition
>
120
)
)
}
121
<
/
TransitionGroup
>
122
<
/
ul
>
123
<
/
Transition
>
124
)
125
}
126
127
export
default
TransitionGrid