單頁應用程式適用的相同文件檢視轉換功能

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,   });    // … }