动画div在React中的容器div之间移动-react-pose？

Question

https://codesandbox.io/s/jvq5yk1n29

This little sandbox moves a dot back and forth between five material-ui Paper boxes when arrow keys are pressed. How would I create a smooth animation as it moves from box to box? I came up with a very convoluted react-pose solution that constantly polls the getClientBoundingRect() on the container DOM elements in order to move the dot with absolute coordinates. But that's just a pain. There must be something more elegant? I can't use CSS (?) since the div is constantly being remounted, leaving nothing for an animation to hook onto. What gives?

Answer 1

You can achieve that with a combination of JS and CSS .

Here're the steps:

1. Make the dot element ready to move right or left(in CSS).
2. Create a state variable that keeps a track from which side (eg left or right ) the dot comes in.
3. Pass the state variable to your Dot component and change the style accordingly.

This technic gives you really the flexibility on how you want to animate your element in React using the state .

Bonus: after I read your code, I'd like to recommend you the following:

• Try always to use === with your comparisons.
• Any element that's absolutely positioned, its parent should have relatively positioned (ie position: relative )
• Try not to duplicate your CSS rules.

Hope that helped! Let me know if it isn't clear!