reactでアニメーション

Question

react.jsで例えば、サイドバーが画面左側から現れるようなアニメーションを実装する場合、考え方としては単純にサイドバーのコンポーネントに座標用のstateを持たせて、その値をsetIntervalで更新する感じで合ってますか？

もしくは、親コンポーネントが座標情報を管理しているのであれば、サイドバーのコンポーネントにpropで座標情報を親から渡すことになるかとは思いますが。

reactのanimation用の公式ライブラリがあったと思いますが、やってること自体は上で書いたような感じでstateかpropの値をsetIntervalで随時変更して、それで、コンポーネントを再レンダリングして、実際のdomに反映されるという感じなのでしょうか？

Answer 1

書いてから思ったけど、あまり答えになってないので、他の人頼んだ。

---

reactは基本的にはデータバインディングを利用して
Stateの値に応じて勝手にDOMがあるべき姿につくり変わってくれ。
…というのを保証するだけの緩い概念の技術です。

ライブラリはこういうやつですかね？
React.jsでAnimation

やってること自体は上で書いたような感じでstateかpropの値をsetIntervalで随時変更して

CSSアニメーションか、window.requestAnimationFrameの二択でしょう。
今時アニメーションにsetIntervalやsetTimeoutを使うのはサポートの切れたはずのIE8対応をさせられるおじさんプログラマだけです。

requestAnimationFrameを使う場合、内部の処理はsetIntervalやsetTimeoutとほぼ同様で、
お察しの通り内部的にはstateやpropを使いまわしながらゴニョゴニョやってるんだろうと思います。

Comments

[退会済みユーザー]

>ライブラリはこういうやつですかね？
>React.jsでAnimation

あ、そうですそうです！リンク先に記載のある通り、"React.jsではAddonとしてサポートされていて、CSS Animationを使ったCSSTransitionGroupとComponentのLifecycle MethodのようにMethodでフックして書く2パターンあります。"ということで、React.jsのAddonとしてサポートされているやつみたいです。

[退会済みユーザー]

あ〜、requestAnimationFrameもありましたね、そういえば。。。
ReactCSSTransitionGroupは名前からしてCSSアニメーションですかね。。
ちゃんと公式ページ読んで勉強し直してきます！！
https://facebook.github.io/react/docs/animation.html