Re-trigger voting animation
just4fun opened this issue · comments
Background
No matter we show the result or not, it's better experience if we could know any player is re-voting.
Normal solutions
To restart animation, we have several approaches.
- Use
setTimeout
to put the next state change into next tick of event loop
this.setState({ voted: false }, () => {
setTimeout(() => this.setState({ voted: true }), 0);
});
- Move
voted
out of<Card />
to destroy (voted=false
) then re-build the DOM (voted=true
)
{voted && <Card voted={voted} />}
- Trigger re-flow or listen on
webkitAnimationEnd
event. https://css-tricks.com/restart-css-animation/
Issues in poker
As for our poker, there are two kinds of cards.
- Me
We could easily pass down a prop me={true}
to <Card />
for indicating it's me, and check nextProps.score !== this.props.score
in componentWillReceiveProps
hook to indicate if I re-vote, then invoke one of the approaches above to restart animation.
- Other players
To avoid knowing others' score before we show the result, poker server will return null
for other players' score, that means we could not use nextProps.score !== this.props.score
to indicate if other player re-vote. Without this if statement, other players' card will always re-animate even he/she doesn't re-vote but other actions trigger the whole state update.
Open this ticket here to discuss.
It's really nice of you to bring this up. I actually tried some ways to address this before, and ultimately realized we need to separate the voting event from the current stateUpdate
event. It's advisable to build a general user action event handling mechanic, and these events are not related to the scores, such as voted, clicked Show
button, or maybe joined/left in the future.
As for the animations, I suggest making it a separate CSS class apart from .voted
. We should remove the class at the end of animation.