Reactで等速直線運動

Question

Reactで要素を等速直線運動させるアニメーションを行うにはどうすればいいでしょうか。

react-transition-group, react-move, react-motion, react-spring は私が軽く調べた感じではそのような動きはできそうにありませんでした。
みんなeasing関数のような加減速のある動きになってしまうようです。

なにか良い方法をご存知でしたら教えていただきたいです。
よろしくお願いします。

Answer 1

react-transition-groupにおけるCSSの-activeクラスのtransitionプロパティの変化させる各要素にlinearを追加したらできました。
like this:

  transition: top 500ms linear, left 500ms linear;

maisumakunさんに教えていただいたCSSネイティブのアニメーションでも実現可能なようですが、react-transition-groupのほうがreactと相性がよいので今回はこちらを使うことにします。

Answer 2

単純に、CSS Animationで実現させる、ではうまく行かないのでしょうか？

Comments

[SATSUKI.]

それは盲点でした！ありがとうございます。