View Transitions API：原生页面过渡动画的新时代

1
const transition = document.startViewTransition(updateCallback);
2

3
// 旧快照已捕获，DOM 更新即将开始
4
transition.ready.then(() => {
5
  console.log('伪元素树已创建，动画即将开始');
6
  // 可以在这里用 Web Animations API 自定义动画
7
});
8

9
// DOM 更新已完成（回调 resolve 后）
10
transition.updateCallbackDone.then(() => {
11
  console.log('DOM 更新完成');
12
});
13

14
// 整个过渡动画结束
15
transition.finished.then(() => {
16
  console.log('过渡完成，伪元素已清理');
17
});
18

19
// 跳过/取消过渡
20
transition.skipTransition();

1
const toggle = document.getElementById('theme-toggle');
2

3
toggle.addEventListener('click', (event) => {
4
  // 检查 API 支持
5
  if (!document.startViewTransition) {
6
    toggleTheme();
7
    return;
8
  }
9

10
  const transition = document.startViewTransition(() => {
11
    toggleTheme();
12
  });
13

14
  // 自定义动画：从点击位置扩散的圆形遮罩
15
  transition.ready.then(() => {
16
    const { clientX, clientY } = event;
17
    const endRadius = Math.hypot(
18
      Math.max(clientX, window.innerWidth - clientX),
19
      Math.max(clientY, window.innerHeight - clientY)
20
    );
21

22
    document.documentElement.animate(
23
      {
24
        clipPath: [
25
          `circle(0px at ${clientX}px ${clientY}px)`,
26
          `circle(${endRadius}px at ${clientX}px ${clientY}px)`,
27
        ],
28
      },
29
      {
30
        duration: 500,
31
        easing: 'ease-in-out',
32
        pseudoElement: '::view-transition-new(root)',
33
      }
34
    );
35
  });
36
});
37

38
function toggleTheme() {
39
  document.documentElement.classList.toggle('dark');
40
}

1
/* 自定义过渡时长和缓动 */
2
::view-transition-group(*) {
3
  animation-duration: 0.4s;
4
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
5
}
6

7
/* 旧视图：向左滑出 */
8
::view-transition-old(root) {
9
  animation: slide-out-left 0.3s ease-in forwards;
10
}
11

12
/* 新视图：从右滑入 */
13
::view-transition-new(root) {
14
  animation: slide-in-right 0.3s ease-out forwards;
15
}
16

17
@keyframes slide-out-left {
18
  to {
19
    transform: translateX(-100%);
20
    opacity: 0;
21
  }
22
}
23

24
@keyframes slide-in-right {
25
  from {
26
    transform: translateX(100%);
27
    opacity: 0;
28
  }
29
}

1
/* 页面整体：淡入淡出 */
2
::view-transition-old(root) {
3
  animation: fade-out 0.25s ease-out;
4
}
5
::view-transition-new(root) {
6
  animation: fade-in 0.25s ease-in;
7
}
8

9
/* 英雄图片：平滑移动和缩放（浏览器自动处理） */
10
::view-transition-group(hero-image) {
11
  animation-duration: 0.5s;
12
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
13
}
14

15
/* 标题：从下方滑入 */
16
::view-transition-new(page-title) {
17
  animation: slide-up 0.4s ease-out;
18
}
19
::view-transition-old(page-title) {
20
  animation: slide-down 0.3s ease-in;
21
}
22

23
@keyframes fade-out { to { opacity: 0; } }
24
@keyframes fade-in { from { opacity: 0; } }
25
@keyframes slide-up { from { transform: translateY(30px); opacity: 0; } }
26
@keyframes slide-down { to { transform: translateY(-30px); opacity: 0; } }

1
/* 向前：新页面从右滑入 */
2
html:active-view-transition-type(forward) {
3
  &::view-transition-old(root) {
4
    animation: slide-out-left 0.3s ease-in;
5
  }
6
  &::view-transition-new(root) {
7
    animation: slide-in-right 0.3s ease-out;
8
  }
9
}
10

11
/* 向后：新页面从左滑入 */
12
html:active-view-transition-type(backward) {
13
  &::view-transition-old(root) {
14
    animation: slide-out-right 0.3s ease-in;
15
  }
16
  &::view-transition-new(root) {
17
    animation: slide-in-left 0.3s ease-out;
18
  }
19
}
20

21
@keyframes slide-out-left { to { transform: translateX(-30%); opacity: 0; } }
22
@keyframes slide-in-right { from { transform: translateX(30%); opacity: 0; } }
23
@keyframes slide-out-right { to { transform: translateX(30%); opacity: 0; } }
24
@keyframes slide-in-left { from { transform: translateX(-30%); opacity: 0; } }

1
/* 列表页 list.html */
2
@view-transition {
3
  navigation: auto;
4
}
5

6
.product-image {
7
  view-transition-name: product-hero;
8
}
9

10
.page-header {
11
  view-transition-name: header;
12
}
13

14
/* 详情页 detail.html */
15
@view-transition {
16
  navigation: auto;
17
}
18

19
.detail-image {
20
  view-transition-name: product-hero; /* 相同的名字 */
21
}
22

23
.page-header {
24
  view-transition-name: header; /* 相同的名字 */
25
}

1
// 在旧页面触发（即将离开）
2
window.addEventListener('pageswap', (event) => {
3
  if (event.viewTransition) {
4
    const url = new URL(event.activation.entry.url);
5

6
    // 根据目标 URL 动态设置 view-transition-name
7
    if (url.pathname.startsWith('/product/')) {
8
      const id = url.pathname.split('/').pop();
9
      const card = document.querySelector(`[data-product-id="${id}"]`);
10
      if (card) {
11
        card.querySelector('img').style.viewTransitionName = 'product-hero';
12
      }
13
    }
14
  }
15
});
16

17
// 在新页面触发（即将展示）
18
window.addEventListener('pagereveal', (event) => {
19
  if (event.viewTransition) {
20
    // 可以在这里调整新页面的过渡设置
21
    const hero = document.querySelector('.detail-hero');
22
    if (hero) {
23
      hero.style.viewTransitionName = 'product-hero';
24
    }
25
  }
26
});