Reactアニメーション事始め

78f5efc1e98c71e473cc7827de1c5db4?s=47 takanorip
May 27, 2017
350

 Reactアニメーション事始め

78f5efc1e98c71e473cc7827de1c5db4?s=128

takanorip

May 27, 2017
Tweet

Transcript

  1. React アニメーション事始め Takanori Oki 第1回 React.js 導入事例 @ 弥生

  2. 目次 • 自己紹介 • 導入 • 主要な実装方とポイント • まとめ

  3. 自己紹介

  4. 自己紹介 • 大木尊紀( @takanorip ) • フロントエンドエンジニア
 (ウェブサイト制作とか) • 株式会社スマートドライブ(2017.06.01~)

    • 最近の悩み:体重の増加
  5. Reactでアニメーション

  6. 要件・きもち

  7. 要件・きもち • 実装したいもの • リスト追加、削除時のアニメーション • メニューの開閉など • きもち •

    シンプルに実装したい
  8. 普通のアニメーション • CSSアニメーション
 (transition、keyframesなど) • jQuery、velocity.jsなどのライブラリを使用 • DOMをゴリゴリいじる感じのやつ

  9. Reactのつらみ

  10. つらみ • jQuery使えない • DOM参照つらい • DOMをいじるのはVirtualDOM経由

  11. 実装方法 1. stateを更新する方法 2. react-transition-group 3. ライブラリを使用

  12. stateを更新する方法

  13. stateを更新する方法 • stateを更新してマルチクラスの付け替え • メニューの開閉などウェブサイトでよくある 動きを実装する時使える • React v15.0からDOMのCSSAnimationEvent をトリガーできるようになった

  14. Actionを検知 state更新 アニメーション classを付け替え Actionを検知 class付け替え アニメーション jQueryとか React

  15. 要素の追加、削除は苦手 • アニメーションが終わってから要素を削除し ないといけない • 自前で実装するのは難しい

  16. 削除イベント発火 アニメーション開始 アニメーション終了 DOM削除 DOM追加 アニメーション開始 アニメーション終了 この間DOMは 残しておく必要 あり

  17. react-transition-group

  18. react-transition-group • 公式のアドオン • CSSTransitionGroupとTransitionGroup • 以前はReactTransitionGroupと ReactCSSTransitionGroupがあったが、 React v15.5.0で非推奨になってしまった 

    (使い方などは特に変わらない)
  19. CSSTransitionGroup <CSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}> {items} </CSSTransitionGroup>

  20. CSSTransitionGroup • CSSアニメーションさせるときに使う • コンポーネントの追加、削除時にclassを
 付与する • 簡単にアニメーションできる • ロジック管理できない

  21. ライブラリを使用

  22. ライブラリを使用 • CSSより複雑な動き表現できる • アニメーションのロジックを管理できる • シンプルに使うことができる

  23. 主なライブラリ • react-motion • velocity-react • react-animations • react-tween-state

  24. ライブラリについて詳しくは こちらの記事を参照! Reactのアニメーションを
 攻略する

  25. 応用編

  26. 応用編 • Reduxを使ってアニメーションのロジックを 管理する • 複雑なアニメーションもできる • アニメーションをDOMから分離できるので、 TweenMaxなど通常使用しているライブラリ を使うこともできるようになる

  27. まとめ • Reactとアニメーションは相性悪いけどやりよ うはたくさんある • ライブラリはそれぞれできることが違うので 確認必要 • もっと複雑なアニメーションを実装する時は Redux使って実装する