/* 开启页面导航的视图过渡（全局配置） */
@view-transition {
  navigation: auto;
}

/* 创建自定义动画 */
@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.38s ease-in both move-out;
}

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