🙆♀️
view-transition
例えば、トップページのサムネをクリックしたらそのサムネがにゅーんと大きくなって、そのまま詳細ページのKVになる。みたいなことができる。
遷移前と後両方のhtmlの<head>の最上部に
<style>
@view-transition {
navigation: auto;
}
</style>
を書く。
シームレスに遷移させたい要素(遷移前のにも遷移後のにも)にclass="hero"をつける。(aではなくimgにつけるとよい)
<img src="thumb.jpg" width="200" class="hero">
style.cssに
.hero {
view-transition-name: hero;
}
と書く。さらにstyle.cssに
::view-transition-group(hero) {
animation-duration: 1s;
animation-timing-function: cubic-bezier(.65, .01, .27, .98);
}
などと書く。これだけ。js不要。ローカルで動かす際にはローカルサーバーを起動する必要あり。
Discussion