この記事の概要
View Transitions API によって、JavaScript なしでもリッチなページ遷移が行えるようになりました。
View Transitions そのものの使い方については以下の記事が分かりやすかったのでご覧ください。
これらの内容を見ていて、ふと気になったことがありました。
共通の要素が画面内でアニメーションしている間、Intersection Observer は要素が画面内に入った・画面外から出たという判定はどのように行うのでしょう。
ということで簡単にですが調べてみて、記事にしました。
結論
View Transitions API を使用していないときと何も変わらない。
すみません。なにも面白くない結果になりました。
せめて少しでも役に立つ記事にするため、調べていて確かめられたことを書きます。
- トランジション完了をトリガーにして何かの処理を追加するのは、できない
- 当初は「トランジション完了したら他の要素がアニメーションする」ようなことがしたかった
-
isIntersecting が
trueとなるのは、トランジション完了時ではない
- トランジション中のどこかをトリガーにして
isIntersectingがfalseになったのを検出するのは、できない- 当初は「消えかける要素をトリガーにして別の場所をアニメーションさせる」ようなことがしたかった
-
isIntersectingがfalseにすらならない
- あくまで前のページと新しいページをアニメーションで繋いでいるに過ぎないので、アニメーションが無かった場合に
trueとfalseとが変わるタイミング自体は同じ
実験していた内容
下記の条件でView Transitions APIを使用した際、していない際で挙動を比べていました。
-
view-transitionのアニメーション時間を長くする -
entry.isIntersectingがtrueのときに描画されましたとメッセージを表示する -
entry.isIntersectingがfalseのときに見えなくなりましたとメッセージを表示する -
DOMContentLoadedとloadのときにメッセージを表示する
補足：view-transitionのアニメーション時間を長くすること
アニメーション時間を意図的に長くしておいた方が、console にメッセージが表示されるタイミングと、見た目上の処理が完了したタイミングを見比べやすかったので、実施していました。
::view-transition-group(*) {
animation-duration: 1s;
}