Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Reactアニメーション事始め
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
takanorip
May 27, 2017
0
920
Reactアニメーション事始め
takanorip
May 27, 2017
Tweet
Share
More Decks by takanorip
See All by takanorip
Design System Documentation Tooling 2025
takanorip
3
2.3k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
1
900
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
650
Bulletproof Design System with TypeScript
takanorip
7
4.7k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
250
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.7k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.2k
早わかり W3C Community Group
takanorip
0
550
Featured
See All Featured
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
0
150
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
100
Amusing Abliteration
ianozsvald
0
100
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
100
What's in a price? How to price your products and services
michaelherold
247
13k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
54
How STYLIGHT went responsive
nonsquared
100
6k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
330
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
0
3.4k
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
160
Fireside Chat
paigeccino
41
3.8k
Transcript
React アニメーション事始め Takanori Oki 第1回 React.js 導入事例 @ 弥生
目次 • 自己紹介 • 導入 • 主要な実装方とポイント • まとめ
自己紹介
自己紹介 • 大木尊紀( @takanorip ) • フロントエンドエンジニア (ウェブサイト制作とか) • 株式会社スマートドライブ(2017.06.01~)
• 最近の悩み:体重の増加
Reactでアニメーション
要件・きもち
要件・きもち • 実装したいもの • リスト追加、削除時のアニメーション • メニューの開閉など • きもち •
シンプルに実装したい
普通のアニメーション • CSSアニメーション (transition、keyframesなど) • jQuery、velocity.jsなどのライブラリを使用 • DOMをゴリゴリいじる感じのやつ
Reactのつらみ
つらみ • jQuery使えない • DOM参照つらい • DOMをいじるのはVirtualDOM経由
実装方法 1. stateを更新する方法 2. react-transition-group 3. ライブラリを使用
stateを更新する方法
stateを更新する方法 • stateを更新してマルチクラスの付け替え • メニューの開閉などウェブサイトでよくある 動きを実装する時使える • React v15.0からDOMのCSSAnimationEvent をトリガーできるようになった
Actionを検知 state更新 アニメーション classを付け替え Actionを検知 class付け替え アニメーション jQueryとか React
要素の追加、削除は苦手 • アニメーションが終わってから要素を削除し ないといけない • 自前で実装するのは難しい
削除イベント発火 アニメーション開始 アニメーション終了 DOM削除 DOM追加 アニメーション開始 アニメーション終了 この間DOMは 残しておく必要 あり
react-transition-group
react-transition-group • 公式のアドオン • CSSTransitionGroupとTransitionGroup • 以前はReactTransitionGroupと ReactCSSTransitionGroupがあったが、 React v15.5.0で非推奨になってしまった
(使い方などは特に変わらない)
CSSTransitionGroup <CSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}> {items} </CSSTransitionGroup>
CSSTransitionGroup • CSSアニメーションさせるときに使う • コンポーネントの追加、削除時にclassを 付与する • 簡単にアニメーションできる • ロジック管理できない
ライブラリを使用
ライブラリを使用 • CSSより複雑な動き表現できる • アニメーションのロジックを管理できる • シンプルに使うことができる
主なライブラリ • react-motion • velocity-react • react-animations • react-tween-state
ライブラリについて詳しくは こちらの記事を参照! Reactのアニメーションを 攻略する
応用編
応用編 • Reduxを使ってアニメーションのロジックを 管理する • 複雑なアニメーションもできる • アニメーションをDOMから分離できるので、 TweenMaxなど通常使用しているライブラリ を使うこともできるようになる
まとめ • Reactとアニメーションは相性悪いけどやりよ うはたくさんある • ライブラリはそれぞれできることが違うので 確認必要 • もっと複雑なアニメーションを実装する時は Redux使って実装する