コピペするだけで使用できる！ページ上のアクティブなアニメーションを取得するシンプルなJavaScript

サイト構築 -JavaScript

Post on:2025年1月16日

sponsors

生成 AI と著作権？5分で分かるAdobe Fireflyの安全な商用利用のための設計 | アドビ公式

ページ上で動作するアクティブなビュー遷移にリンクされたすべてのアニメーションを取得するJavaScriptのコードを紹介します。

数行のコードをコピペするだけで使用でき、アニメーションを反転させたり、継続時間を変更したり、キーフレームを変更したりなど、さまざまな操作を実行できます。

ビュー遷移（View Transitions）はSafariでもサポートされ、今年は使用する機会が増えそうですね。

View Transitions Snippets: Getting all Animations linked to a View Transition

ビュー遷移によるアニメーションについては、下記ページをご覧ください。

お弁当箱みたいなUI、View Transitions APIでCSSアニメーションが進化する

まずは、デモをご覧ください。
ブルーのボックスの疑似要素（::view-transition-group(box)）のアニメーションのキーフレームを数行のコードで取得します。

See the Pen
Debugging View Transitions: Getting the group’s animation by coliss (@coliss)
on CodePen.

たとえば、アニメーションして動作することもあればアニメーションさせないで動作することもあるという場合にも便利です。下記のデモページではグレーのサークルをクリックするとアニメーションでページ遷移しますが、ドラッグするとアニメーションが停止してページ遷移できます。

デモページ

アクティブなビュー遷移にリンクされているすべてのアニメーションを取得するコードは、下記の通りです。

const vtAnimations = document.getAnimations().filter((anim) => {
  return anim.effect.target === document.documentElement &&
      anim.effect.pseudoElement?.startsWith("::view-transition")
});

const vtAnimations = document.getAnimations().filter((anim) => {

return anim.effect.target === document.documentElement &&

anim.effect.pseudoElement?.startsWith("::view-transition")

});

上記は::view-transitionで始まるdocument.documentElementの疑似要素にリンクされているものをフィルタリングします。

このコードは、トランジションを開始し、スナップショットの後に実行されます。

// ビュートランジションを開始
const t = document.startViewTransition(…);
    
// スナップショットが撮られるのを待つ
await t.ready;

// すべてのアニメーションを取得
const vtAnimations = document.getAnimations().filter((anim) => {
  return anim.effect.target === document.documentElement &&
      anim.effect.pseudoElement?.startsWith("::view-transition")
});

// ビュートランジションを開始

const t = document.startViewTransition(…);

// スナップショットが撮られるのを待つ

await t.ready;

// すべてのアニメーションを取得

const vtAnimations = document.getAnimations().filter((anim) => {

return anim.effect.target === document.documentElement &&

anim.effect.pseudoElement?.startsWith("::view-transition")

});

将来的にはw3c/csswg-drafts#9908のおかげで、下記のようにコードを簡略化できると思います。

const vtAnimations = t.transitionRoot.getAnimations({
  pseudoElement: '::view-transition',
  subtree: true,
});

const vtAnimations = t.transitionRoot.getAnimations({

pseudoElement: '::view-transition',

subtree: true,

});

上記は、トランジションルートのgetAnimations()を直接呼び出すもので、スコープされたトランジションを使用するときに便利です。また、新しいpseudoElementオプションを使用して::view-transitionオーバーレイ疑似要素をフィルタします。subtree: trueの場合、その疑似要素のすべての子要素も含まれます。

ただし、このコードはまだ仕様を定める段階のため、現在はどのブラウザにも実装されていません。実装されるまでは、前述のコードを使用してください。