回答編集履歴

playground の追加

2024/04/22 08:47

投稿

juner

スコア142

test CHANGED Viewed

@@ -11,3 +11,210 @@
 https://developer.mozilla.org/ja/docs/Web/API/Web_Animations_API
 以上。
+追伸:
+参考まで css animation と js animation(Web Animation API) の比較サンプルを追記しておきます。
+[playground](https://livecodes.io/?x=code/N4IgLglmA2CmIC4QGMDOqAEB6DArTAhgHYQC2BkA9kRqgaQA5wgA0IAJrKsgE4QNUiiEKxAALWAXbCAPKVhgCGZGII9UCgLwAdEAFUAKgDEAtAA5d2AHzaichUqL1YOkADcIsAO4NKPMJbI1GCwRGCuXhDsYGKanB7IsCaR0WIsGBAkkATQJtw5LgCMAHQADJZYVqJiYKTQAIJgYOrC0MQA5q6hgW3orrqiiu2oiADaIgC6bATIkG6wAKLsUH7C5DwA1gCuDKLr27sIoG1E7VsE7fBINXWiQWGhYLLLbsq9qK5oqLo2PLYYGBkYkKVi+MiwwN+-0BYgATFZABYRgC5PQBCZuC4VCaICXm8CH1dIoeJcwMo8UlCj9wS9MQCgfCxJR5jw0RD4do-liZDjkO9XITiaSNCZYZSsNT2dC6aDoBBkBsWRiJZzubyCWoBcgySYAMyi8UcqkQNyYrlG3H4kD4H5K2mQ-DokE2mHw5EKtkc2kqvEfNVEhSC8l6o0051WBlMt0h02vHnevnq-2aoUikBWQ3Gp1Snmy+Xo92Sr0W-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-ADODeajATLACbDLfQAEwy5MAMeRgA+Uw-X3CNixv3LTuX+rdKG0Opsw5BmNZllOwZ-dqpie6HHQC0yBsDk75hYLjbZezWJangjrPwMAJo+xNm7E6BAW5twqpnCYEwsCTBBGgH4NcqbzYLIFNmjAEgqY1BYqUBgAAPGxKQYjJbSzY5YqAtFNgQJkGUpUTAVXC3KGxFUZgbHaFuLYAHQv5QixgOrsBQjm1qeDYymA4vuTsQF1V1W5R1ZdgBtcbg1C7iCyFsLfg7Om3PHM3rJ8ABUjTMCAA49FEGBVtYA1kskwhRBuo2G7V+r42MCTcFjNuxTXws8Gwwh6ga4SuSCKnBeCpBMCZEiSEEqK48Fbl0TEtbG34vyOZLt-bkDDuwgQOlIqcWARndGw19gE2pu3aUfd+bZa-2vcyO9jAn3SjfYyDhPC-2iCA9psDx8oPYdjW1P1pRJ3wao4uxjq7WPgt3bm49-Hz2iCE9KmoEnrFyfHZpzwcgdOHwhEZw5mpToAACBMIpcAsQr6iQaRxivZ-Oa8y5ZeRZ1-uKpSpAqUEN1eRcJvVza90c+KxH5Osq4NFgTz3mDTe9gCGLA63ABCDA+wAUQyACLUwAQ-K0sALoMuTABrcrkwAnQzMsftDnzfmSRBqquwfxcW8sFYQHVqINji-sBMCERgbQQj3aUhhDAmyiBNYeGEBvmRm-8zAKXvg5eCCu0oCYIc4WvBm68KXn6a5YQpfS4t6WPX0jLcNwXtohXWs9+71EYL-fB-D9Hxv8vW4R8k+wBgI77u5-iTi2X2vpARck5sQAMgwEddbyO1+b7C3X2CSuppdZnIvq-HvG-O-WER-Z-XbQ3AEa-T-W-SfH-I2D3WwFzZsbsEAU8EAP3RAY4Doc4S4YQL4O4YIR4YQNAtgVzAQLAkAE4M4C4K4S0AgSbcgp4NgXKYgpAUgjAlArgCQBQEYBAUYKYDA3gNzPggQlg9AXZLgBQEgtgUVRIdAPwUQwQxSPsMVHSJoTIYYLA9AsgXwfwPg4AdA5sVsAwowrgMAAwqgnA2g4QYwrgYQiglgogsIEg9ApkSmagYQWEAAdkGEoHyksNCGFjgGkCQByGgFEBmDmDoN7HyngDIJ3C2D4JQHCw0GkGPGPCAA)
+```html
+<div class="css">
+  <h1>css</h1>
+  <h2>表示時</h2>
+  <div class="target case-1"></div>
+  <h2>hover時</h2>
+  <div class="target case-2"></div>
+  <h2>click時</h2>
+  <div class="target case-3"></div>
+</div>
+<div class="js">
+  <h1>js</h1>
+  <h2>表示時</h2>
+  <div class="target case-1"></div>
+  <h2>hover時</h2>
+  <div class="target case-2"></div>
+  <h2>click時</h2>
+  <div class="target case-3"></div>
+</div>
+<script type=module>
+  const keyframes = [
+      { transform: 'rotate(0)'},
+      { transform: 'rotate(1turn)'},
+  ];
+  const options = {
+    duration: 1000,
+    iterations: Infinity,
+  };
+  const onetime = {
+    duration: 1000,
+    iterations: 1,
+  };
+  {
+    // js 表示時
+    const target = document.querySelector(".js .target.case-1");
+    target.classList.add('animate');
+    target.animate(keyframes, options);
+  }
+  {
+    // js hover時
+    let controller = new AbortController();
+    const target = document.querySelector(".js .target.case-2");
+    target.addEventListener('pointerover', (e) => {
+      const target = e.currentTarget;
+      target.setPointerCapture(e.pointerId);
+      target.classList.add('animate');
+      const animate = target.animate(keyframes, options);
+      const signal = controller.signal;
+      signal.addEventListener('abort', () => {
+        target.classList.remove('animate');
+        animate.cancel();
+      })
+    });
+    target.addEventListener('pointerout', (e) => {
+      controller.abort();
+      controller = new AbortController();
+    });
+  }
+  {
+    // js click時
+    let controller = new AbortController();
+    const target = document.querySelector(".js .target.case-3");
+    target.addEventListener('pointerup', async (e) => {
+      const target = e.currentTarget;
+      // 前をキャンセル
+      controller.abort();
+      const c = new AbortController();
+      controller = c;
+      const animate = target.animate(keyframes, onetime);
+      const signal = c.signal;
+      // キャンセルすると状態をクリアする
+      signal.addEventListener('abort', () => {
+        target.classList.remove('animate');
+        if (animate.playState === "finished") return;
+        animate.cancel();
+      });
+      target.classList.add('animate');
+      try {
+      await animate.finished;
+      }catch(e){ }
+      // 完了したので状態をクリアする
+      c.abort();
+    });
+  }
+  {
+    // css click時
+    let controller = new AbortController();
+    const target = document.querySelector(".css .target.case-3");
+    let promise = Promise.resolve();
+    let i = 0;
+    target.addEventListener('pointerup', (e) => {
+      const target = e.currentTarget;
+      // 前をキャンセル
+      controller.abort();
+      const c = new AbortController();
+      controller = c;
+      // シーケンシャルに実行しないと タイミングに問題が出る
+      promise = promise.then(async () => {
+        target.classList.add('animate');
+        const signal = c.signal;
+        // キャンセル時は class を外すだけ
+        signal.addEventListener('abort', () => {
+          target.classList.remove('animate');
+        });
+        const deferred = (() => {
+          let resolve,reject;
+          const promise = new Promise((res, rej) => [resolve, reject] = [res,rej]);
+          return {resolve, reject, promise};
+        })();
+        // animationend / animationcancel どちらかが発生するまで待機
+        target.addEventListener('animationend', deferred.resolve);
+        target.addEventListener('animationcancel', deferred.resolve);
+        await deferred.promise;
+        // キャンセルしていなければ キャンセル
+        if (!signal.aborted) c.abort();
+        // イベントの解放
+        target.removeEventListener('animationend', deferred.resolve);
+        target.removeEventListener('animationcancel', deferred.resolve);
+      });
+    });
+  }
+</script>
+<style>
+  :root {
+    --animate-color: red;
+    .target {
+      height: 100px;
+      width: 100px;
+      display:inline-block;
+      background-color: green;
+    }
+    .js {
+      .animate {
+        background: var(--animate-color);
+      }
+    }
+    .css {
+      /* css 常時 */
+      .case-1 {
+        background: var(--animate-color);
+        animation: linear 1000ms infinite normal rotate;
+      }
+      /* css hover時 */
+      .case-2:hover {
+        background: var(--animate-color);
+        animation: linear 1000ms infinite normal rotate;
+      }
+      .case-3.animate {
+        background: var(--animate-color);
+        animation: linear 1000ms 1 normal rotate;
+      }
+    }
+  }
+  @keyframes rotate {
+    from {
+      transform: rotate(0);
+    }
+    to {
+      transform: rotate(1turn);
+    }
+  }
+</style>
+<style>
+  /* あまり関係ないその他のスタイル */
+  :root {
+    body {
+      display:grid;
+      grid-template-columns: min-content min-content;
+      grid-auto-flow: row;
+      gap: 20px;
+    }
+    .js, .css {
+      display: grid;
+      grid-auto-flow: row;
+      grid-row: 1 / -1;
+    }
+    .js {
+      grid-column: 1;
+      & > * {
+        grid-column: 1;
+      }
+    }
+    .css {
+      grid-column: 2;
+      & > * {
+        grid-column: 2;
+      }
+    }
+  }
+</style>
+```