デザイン戦略室フロントエンドエンジニアの吉井です。 昨今の React 実装は、StatelessFunctionalComponent(SFC)を用いて Flux や Redux に状態管理を委譲するデザインパターンが定着していますね。アプリケーションの UX に欠かせないアニメーションですが「SPA とは相性が悪い」という噂を聞いたことがあります。従来の html アニメーションといえば jQuery.animate によるものが定番ですが、jQuery.animate は以下の理由で React と相性が悪いです。 jQuery を使用しないことがほとんどで、ほかライブラリに頼る必要がある。 DOM 参照(ref 参照)のために SFC を諦めないといけない。 Animation 実行中に component を unmount すると参照エラーになる。 Animation の状態を
![React + Redux- Animation - - DeNA Design](https://cdn-ak-scissors.b.st-hatena.com/image/square/6095c4fbf54c2f114ab91a0bddffd9da5a3f081e/height=288;version=1;width=512/https%3A%2F%2Fdesign.dena.com%2F_next%2Fstatic%2Fimages%2Fcover-500-1478db82c27ebe9dbdcc50df7d3a8461.jpg)