/* =========================================================================
しましま旅行記 — 画面の切り替わり（サイト共通）
ホーム・しおり・経県値で、画面の変わりかたがばらばらだった。
ページを移るときは何も起きず、ページの中で日を切り替えるときだけ
ふわっと変わる、という具合に。ここで1つに揃える。
使いかた：各ページの にこの2行を入れておく。
ページからページへの移動は @view-transition が受け持つので、
ページ側に書くことは何もない。ページの中で中身を入れ替えるときだけ
VIEW.swap(() => { ...書き換え... }) で包む。同じ見えかたになる。
========================================================================= */
/* ページからページへ。同じ置き場のあいだだけ効く */
@view-transition { navigation: auto; }
/* 入れ替わりかたは1種類だけ持つ。
出ていく画面は少し上へ抜け、入ってくる画面は下から上がってくる。
紙をめくるというより、めくった先が持ち上がってくる感じ。 */
@keyframes vt-out { from { opacity:1; transform:none }
to { opacity:0; transform:translateY(-8px) } }
@keyframes vt-in { from { opacity:0; transform:translateY(12px) }
to { opacity:1; transform:none } }
::view-transition-old(root),
::view-transition-new(root){
animation-duration:.36s;
animation-timing-function:cubic-bezier(.2,.9,.25,1);
animation-fill-mode:both;
mix-blend-mode:normal; /* 重なっている間、紙の色が濁らないように */
}
::view-transition-old(root){ animation-name:vt-out }
::view-transition-new(root){ animation-name:vt-in; animation-delay:.06s }
/* 重なりかた。入ってくる画面が上 */
::view-transition-image-pair(root){ isolation:auto }
/* View Transitions が無いブラウザ用の受け皿。
view.js が html に .vt-leaving を付けたときだけ効く */
html.vt-leaving body{
opacity:0;
transform:translateY(-8px);
transition:opacity .2s cubic-bezier(.2,.9,.25,1),transform .2s cubic-bezier(.2,.9,.25,1);
}
@media (prefers-reduced-motion:reduce){
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*){ animation:none !important }
html.vt-leaving body{ transition:none;opacity:1;transform:none }
}