<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kole UI · PageTransition</title>
  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="./PageTransition.css" />
</head>
<body>
  <div class="kole-page">
    <h2 class="kole-h2">PageTransition 页面切换动画</h2>
    <p class="kole-desc">路由切换动画：淡入 / 滑动 / 缩放，时长约 0.35s。点击按钮预览动画。</p>

    <div class="kole-demo">
      <div class="kole-pt">
        <div class="kole-pt-bar">
        <button class="kole-btn" data-t="fade">淡入</button>
        <button class="kole-btn" data-t="slide">滑动</button>
        <button class="kole-btn" data-t="zoom">缩放</button>
        </div>
        <div class="kole-pt-stage kole-pt-fade" id="stage">当前页面内容</div>
        </div>
  </div>

  <script>
    var stage = document.getElementById('stage');
    var pages = ['当前页面内容', '页面 B 内容', '页面 C 内容'];
    var idx = 0;
    document.querySelectorAll('.kole-pt-bar .kole-btn').forEach(function (b) {
      b.onclick = function () {
        var t = b.dataset.t;
        idx = (idx + 1) % pages.length;
        stage.textContent = pages[idx];
        stage.className = 'kole-pt-stage kole-pt-' + t;
        // 强制重排以重启动画
        void stage.offsetWidth;
        stage.classList.add('kole-pt-' + t);
      };
    });
  </script>
</body>
</html>
