@view-transitionを使って遷移時にトランジションする

Chrome126/Edge126で@view-transitionが使えるようになった。

遷移先がsame-originに限り有効になる。

@view-transition {
  navigation: auto;
}

/**
 * ::view-transition-old(root) / ::view-transition-new(root) と
 * @keyframesを使うことでより細かなトランジションを設定できる。
 */
@keyframes move-out {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes move-in {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0%);
  }
}

::view-transition-old(root) {
  animation: 0.5s ease-in both move-out;
}

::view-transition-new(root) {
  animation: 0.5s ease-in both move-in;
}