UIT INSIDE

LINE UIT室の開発者による「最新のフロントエンド」をキャッチアップできる Podcast

  • オープニング
    00:00
  • 1. SPA の消滅時のアニメーションについて
    00:35
  • 2. Vue.js の transition について
    01:12
  • 3. react-transiton-group について
    05:01
  • 4. react-spring が便利な話
    11:54
  • 5. クロージング
    17:24

ep.29 SPA × Animationの悩み Vue/Reactでのかしこい実装方法と react-spring への期待

2019/11/15
500 views
HANATANI Takuma緑豆はるさめ

@potato4d と @spring_raining が、 Vue.js のアニメーション機能、 React の場合どうやって実現しているかなどについて語りました。

  • SPA の「消えるとき」のアニメーションの話
    • 簡単なものだと CSS アニメーションは便利
    • transition
    • animation / keyframes
    • 一方で DOM 要素の大きな変化には追従しづらい
      • フェードアウトのアニメーションが終わってから DOM を消したい
      • アニメーションの状況に応じて動かしたい
    • Dirty な方法だとつらい
      • setTimeout

Vue.js の Transition

  • https://jp.vuejs.org/v2/guide/transitions.html#ad
  • Vue.js コアに存在する組み込みコンポーネント
    • <slot /> などのように Vue.js が意味のあるタグとして提供している
    • class や style のつけ外しと DOM の表示管理を行う

Image from Gyazo

React コミュニティの react-transition-group

Image from Gyazo

注目のライブラリ react-spring

  • https://github.com/react-spring/react-spring
  • React 専用のアニメーション管理ライブラリ
    • アニメーションの速度や easing まで含めて react-spring で管理する
  • spring の名の通り、バネの原理でプロパティを管理する
    • mass(重さ)やtension(バネの強さ)、friction(摩擦係数)などを設定することで、アニメーションを統合的に管理可能

Image from Gyazo

BGM & SE: Maoudamashii