适用于单页应用的同文档视图转换

function handleClick(e) {  // Fallback for browsers that don't support this API:  if (!document.startViewTransition) {  updateTheDOMSomehow();  return;  }  // With a View Transition:  document.startViewTransition(() => updateTheDOMSomehow()); } 

function spaNavigate(data) {  // Fallback for browsers that don't support this API:  if (!document.startViewTransition) {  updateTheDOMSomehow(data);  return;  }  // With a transition:  document.startViewTransition(() => updateTheDOMSomehow(data)); } 

document.startViewTransition(() => updateTheDOMSomehow(data)); 

::view-transition └─ ::view-transition-group(root)   └─ ::view-transition-image-pair(root)   ├─ ::view-transition-old(root)   └─ ::view-transition-new(root) 

::view-transition-old(root), ::view-transition-new(root) {  animation-duration: 5s; } 

@keyframes fade-in {  from { opacity: 0; } } @keyframes fade-out {  to { opacity: 0; } } @keyframes slide-from-right {  from { transform: translateX(30px); } } @keyframes slide-to-left {  to { transform: translateX(-30px); } } ::view-transition-old(root) {  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left; } ::view-transition-new(root) {  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right; } 

.main-header {  view-transition-name: main-header; } 

::view-transition ├─ ::view-transition-group(root) │ └─ ::view-transition-image-pair(root) │ ├─ ::view-transition-old(root) │ └─ ::view-transition-new(root) └─ ::view-transition-group(main-header)   └─ ::view-transition-image-pair(main-header)   ├─ ::view-transition-old(main-header)   └─ ::view-transition-new(main-header) 

.main-header-text {  view-transition-name: main-header-text;  width: fit-content; } 

::view-transition ├─ ::view-transition-group(root) │ └─ … ├─ ::view-transition-group(main-header) │ └─ … └─ ::view-transition-group(main-header-text)   └─ … 

h1 {  view-transition-name: title; } ::view-transition-group(title) {  animation-timing-function: ease-in-out; } #card1 { view-transition-name: card1; } #card2 { view-transition-name: card2; } #card3 { view-transition-name: card3; } #card4 { view-transition-name: card4; } … #card20 { view-transition-name: card20; } ::view-transition-group(card1), ::view-transition-group(card2), ::view-transition-group(card3), ::view-transition-group(card4), … ::view-transition-group(card20) {  animation-timing-function: var(--bounce); } 

#card1 { view-transition-name: card1; } #card2 { view-transition-name: card2; } #card3 { view-transition-name: card3; } #card4 { view-transition-name: card4; } #card5 { view-transition-name: card5; } … #card20 { view-transition-name: card20; } #cards-wrapper > div {  view-transition-class: card; } html::view-transition-group(.card) {  animation-timing-function: var(--bounce); } 

.full-embed {  view-transition-name: full-embed; } 

thumbnail.onclick = async () => {  thumbnail.style.viewTransitionName = 'full-embed';  document.startViewTransition(() => {  thumbnail.style.viewTransitionName = '';  updateTheDOMSomehow();  }); }; 

.sidebar {  view-transition-name: sidebar; } 

::view-transition ├─ …other transition groups… └─ ::view-transition-group(sidebar)   └─ ::view-transition-image-pair(sidebar)   ├─ ::view-transition-old(sidebar)   └─ ::view-transition-new(sidebar) 

/* Entry transition */ ::view-transition-new(sidebar):only-child {  animation: 300ms cubic-bezier(0, 0, 0.2, 1) both fade-in,  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right; } /* Exit transition */ ::view-transition-old(sidebar):only-child {  animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right; } 

document.startViewTransition(async () => {  await something;  await updateTheDOMSomehow();  await somethingElse; }); 

const wait = ms => new Promise(r => setTimeout(r, ms)); document.startViewTransition(async () => {  updateTheDOMSomehow();  // Pause for up to 100ms for fonts to be ready:  await Promise.race([document.fonts.ready, wait(100)]); }); 

::view-transition-old(full-embed), ::view-transition-new(full-embed) {  /* Prevent the default animation,  so both views remain opacity:1 throughout the transition */  animation: none;  /* Use normal blending,  so the new view sits on top and obscures the old view */  mix-blend-mode: normal; } 

::view-transition-old(full-embed), ::view-transition-new(full-embed) {  /* Prevent the default animation,  so both views remain opacity:1 throughout the transition */  animation: none;  /* Use normal blending,  so the new view sits on top and obscures the old view */  mix-blend-mode: normal;  /* Make the height the same as the group,  meaning the view size might not match its aspect-ratio. */  height: 100%;  /* Clip any overflow of the view */  overflow: clip; } /* The old view is the thumbnail */ ::view-transition-old(full-embed) {  /* Maintain the aspect ratio of the view,  by shrinking it to fit within the bounds of the element */  object-fit: contain; } /* The new view is the full image */ ::view-transition-new(full-embed) {  /* Maintain the aspect ratio of the view,  by growing it to cover the bounds of the element */  object-fit: cover; } 

/* Transitions for mobile */ ::view-transition-old(root) {  animation: 300ms ease-out both full-slide-to-left; } ::view-transition-new(root) {  animation: 300ms ease-out both full-slide-from-right; } @media (min-width: 500px) {  /* Overrides for larger displays.  This is the shared axis transition from earlier in the article. */  ::view-transition-old(root) {  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;  }  ::view-transition-new(root) {  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;  } } 

@media (prefers-reduced-motion) {  ::view-transition-group(*),  ::view-transition-old(*),  ::view-transition-new(*) {  animation: none !important;  } } 

const direction = determineBackwardsOrForwards(); const t = document.startViewTransition({  update: updateTheDOMSomehow,  types: ['slide', direction], }); 

/* Determine what gets captured when the type is forwards or backwards */ html:active-view-transition-type(forwards, backwards) {  :root {  view-transition-name: none;  }  article {  view-transition-name: content;  }  .pagination {  view-transition-name: pagination;  } } /* Animation styles for forwards type only */ html:active-view-transition-type(forwards) {  &::view-transition-old(content) {  animation-name: slide-out-to-left;  }  &::view-transition-new(content) {  animation-name: slide-in-from-right;  } } /* Animation styles for backwards type only */ html:active-view-transition-type(backwards) {  &::view-transition-old(content) {  animation-name: slide-out-to-right;  }  &::view-transition-new(content) {  animation-name: slide-in-from-left;  } } /* Animation styles for reload type only (using the default root snapshot) */ html:active-view-transition-type(reload) {  &::view-transition-old(root) {  animation-name: fade-out, scale-down;  }  &::view-transition-new(root) {  animation-delay: 0.25s;  animation-name: fade-in, scale-up;  } } 

html:active-view-transition {  … } 

if (isBackNavigation) {  document.documentElement.classList.add('back-transition'); } const transition = document.startViewTransition(() =>  updateTheDOMSomehow(data) ); try {  await transition.finished; } finally {  document.documentElement.classList.remove('back-transition'); } 

/* 'Forward' transitions */ ::view-transition-old(root) {  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left; } ::view-transition-new(root) {  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 300ms  cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right; } /* Overrides for 'back' transitions */ .back-transition::view-transition-old(root) {  animation-name: fade-out, slide-to-right; } .back-transition::view-transition-new(root) {  animation-name: fade-in, slide-from-left; } 

::view-transition-old(video) {  /* Don't show the frozen old view */  display: none; } ::view-transition-new(video) {  /* Don't fade the new view in */  animation: none; } 

navigation.addEventListener("navigate", (e) => {  // Don't intercept if not needed  if (shouldNotIntercept(e)) return;  // Intercept the navigation  e.intercept({  handler: async () => {  // Fetch the new content  const newContent = await fetchNewContent(e.destination.url, {  signal: e.signal,  });  // The UA does not support View Transitions, or the UA  // already provided a Visual Transition by itself (e.g. swipe back).  // In either case, update the DOM directly  if (!document.startViewTransition || e.hasUAVisualTransition) {  setContent(newContent);  return;  }  // Update the content using a View Transition  const t = document.startViewTransition(() => {  setContent(newContent);  });  }  }); }); 

if (!document.startViewTransition || e.hasUAVisualTransition) {  setContent(newContent);  return; } 

let lastClick; addEventListener('click', event => (lastClick = event)); function spaNavigate(data) {  // Fallback for browsers that don't support this API:  if (!document.startViewTransition) {  updateTheDOMSomehow(data);  return;  }  // Get the click position, or fallback to the middle of the screen  const x = lastClick?.clientX ?? innerWidth / 2;  const y = lastClick?.clientY ?? innerHeight / 2;  // Get the distance to the furthest corner  const endRadius = Math.hypot(  Math.max(x, innerWidth - x),  Math.max(y, innerHeight - y)  );  // With a transition:  const transition = document.startViewTransition(() => {  updateTheDOMSomehow(data);  });  // Wait for the pseudo-elements to be created:  transition.ready.then(() => {  // Animate the root's new view  document.documentElement.animate(  {  clipPath: [  `circle(0 at ${x}px ${y}px)`,  `circle(${endRadius}px at ${x}px ${y}px)`,  ],  },  {  duration: 500,  easing: 'ease-in',  // Specify which pseudo-element to animate  pseudoElement: '::view-transition-new(root)',  }  );  }); } 

function transitionHelper({  skipTransition = false,  types = [],  update, }) {  const unsupported = (error) => {  const updateCallbackDone = Promise.resolve(update()).then(() => {});  return {  ready: Promise.reject(Error(error)),  updateCallbackDone,  finished: updateCallbackDone,  skipTransition: () => {},  types,  };  }  if (skipTransition || !document.startViewTransition) {  return unsupported('View Transitions are not supported in this browser');  }  try {  const transition = document.startViewTransition({  update,  types,  });  return transition;  } catch (e) {  return unsupported('View Transitions with types are not supported in this browser');  } } 

function spaNavigate(data) {  const types = isBackNavigation ? ['back-transition'] : [];  const transition = transitionHelper({  update() {  updateTheDOMSomehow(data);  },  types,  });  // … }