Web Animations APIのcompositeがすごいよ！のページ by @yuneco
何も考慮しない場合
- キャラクター（たまさん）はCSS Animationで常時回転しています
- クリックするとJavaScriptでズームアニメーションを実行します
- クリックすると回転状態が解除されてしまうのがイケてないですね🙅♀️
- ズームアニメーションにはWeb Animations APIを使用していますが、より古典的にCSSのクラスを設定/削除する方法でも結果は変わりません
ラッパーを使う場合（従来の方法）
- 「何も考慮しない場合」の問題を解決する従来の方法です
- やり方はいくつかありますが、ラッパー要素を作って回転とズームを分けるのが基本
- アニメーションのせいでDOMの構造が変わっちゃうのがイケてないですね🙅♀️
- アニメーションが複雑になるとさらにラッパー要素が増えていく辛み😢
compositeを使う（新しい方法）
- ラッパー要素を使わない（比較的）新しい方法です
- Web Animations APIのcompositionを使ってアニメーションの「重ね掛け」を行います
- 複雑なアニメーションを組み合わせてもDOMはクリーンでいいですね😸
- Chrome, FireFoxではすでに使えます。SafariはTP 142で使えるようになりました🎉（正式リリースはまだです。早よ）
compositeを使う（新しい方法） + 連打できないように制御
- 上の例だと連打するとどんどん大きくなってしまうので、ちょっと制御を入れた例です
- Web Animations APIならPromiseでアニメーションの終了を検知できるので、この手の制御もとても簡単です👏