疑似要素を JavaScript でアニメーション（Web Animation API）

CATEGORY: jQuery

2023年4月7日

通常、疑似要素は JavaScript で直接操作できませんが、Web Animation API を利用すると比較的簡単に素の JavaScript でアニメーションを設定することができます。

animate() メソッドの第2引数（または KeyframeEffect() の第3引数）のオブジェクトで pseudoElement プロパティに疑似要素を指定することで、通常の要素と同じようにアニメーションを設定できます。

pseudoElement プロパティには疑似要素セレクターを表す文字列（::after、::before、および ::marker）を指定することができます。

以下は p 要素のテキストの左側に擬似要素 ::before で作成した三角形を表示して、テキストをクリックすると疑似要素の三角形を回転するアニメーションの例です。

三角形が回転している状態でクリックすると、アニメーションを停止します。

Click !

HTML

<p id="triangle">Click !</p>

疑似要素 ::before で正三角形のアイコンを挿入しています。

関連ページ：CSS 擬似要素 ::before ::after

CSS

#triangle {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
}

#triangle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto 0;
  border-bottom: calc(10px * 1.732) solid #139563;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  width: 0;
  height: 0;
  transform-origin: 50% 58%;
}

アニメーションの設定方法は色々な方法がありますが、以下では animate() メソッドで Animation オブジェクトを作成し、クリックイベントで再生・停止するようにしています。

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  // 対象の要素を取得
  const target = document.getElementById('triangle');
  // animate() で Animation オブジェクトを作成
  const animation = target.animate(
    // キーフレームオブジェクトに回転のアニメーションを指定
    { rotate: ["0deg", "360deg"] },
    {
      duration: 3000,
      // pseudoElement プロパティに対象の擬似要素を指定
      pseudoElement: "::before",
      iterations: Infinity
    }
  );
  // アニメーションの自動再生を停止
  animation.cancel();
  // クリックイベントのリスナーを設定
  target.addEventListener("click", (e) => {
    const playState = animation.playState;
    if(playState === 'running') {
      // アニメーションが再生中の場合は停止
      animation.pause();
    }else{
      // アニメーションが再生中でなければ再生
      animation.play();
    }
  });
});

Web Design Leaves

疑似要素を JavaScript でアニメーション（Web Animation API）