Web UI 実装勉強会 #1

https://gyazo.com/45d3b3fdef2a816c55243693a8b5e16b

view-transition-name: none;

画面全体が遷移してしまうので:rootに設定

nameを要素につける

フレックスエディタのAI機能紹介とUI/UXの小さな工夫

https://gyazo.com/7eb0df3f79d8c56b2ce532a26af3af39

https://gyazo.com/698b53547ead5ae807d586372839a8a9

2.5.8

24px x 24px

2.5.5

44px x 44px

HIGでも同じ

App Store-like Web UI

App StoreのUIってどんなの？

クリックしたカードが画面全体を覆うアニメーション

AnimatePresence

Exitアニメーションを簡単に実装できる

Vue.jsの<Transition>や<TransitionGroup>と似ている

Layout Animation

justify-contentのようなCSSではアニメーションが難しいのをアニメーションできる

Shared Layout Animation

同じlayoutIdを持つものをアニメーションできる

react-callを使ってダイアログをいろんなとこで再利用しよう！

window.confirm()のようなものをコンポーネントで呼べる

yamanoku.icon発表