var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var A=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),C=(l,n)=>{for(var r in n)i(l,r,{get:n[r],enumerable:!0})},t=(l,n,r,a)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of B(n))!F.call(l,s)&&s!==r&&i(l,s,{get:()=>n[s],enumerable:!(a=p(n,s))||a.enumerable});return l};var m=(l,n,r)=>(r=l!=null?h(y(l)):{},t(n||!l||!l.__esModule?i(r,"default",{value:l,enumerable:!0}):r,l)),u=l=>t(i({},"__esModule",{value:!0}),l);var c=A((b,o)=>{o.exports=_jsx_runtime});var E={};C(E,{default:()=>f,frontmatter:()=>D});var e=m(c()),D={title:"Implementing View Transitions in React",description:"A comprehensive guide on utilizing the View Transition API within React applications to create smooth and engaging animations.",date:"2025-04-07",tags:["react","animations","view-transition-api"]};function d(l){let n=Object.assign({h1:"h1",a:"a",p:"p",h2:"h2",ol:"ol",li:"li",strong:"strong",h3:"h3",figure:"figure",pre:"pre",code:"code",span:"span",hr:"hr"},l.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h1,{id:"implementing-view-transitions-in-react",children:(0,e.jsx)(n.a,{href:"#implementing-view-transitions-in-react",children:"Implementing View Transitions in React"})}),` `,(0,e.jsx)(n.p,{children:"The View Transition API allows developers to create seamless animations between different states or pages in a web application. When integrated with React, it enhances the user experience by providing smooth transitions during state changes or navigations."}),` `,(0,e.jsx)(n.h2,{id:"using-the-view-transition-api-in-react",children:(0,e.jsx)(n.a,{href:"#using-the-view-transition-api-in-react",children:"Using the View Transition API in React"})}),` `,(0,e.jsx)(n.p,{children:"To integrate the View Transition API in a React component, follow these steps:"}),` `,(0,e.jsxs)(n.ol,{children:[` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:"Check for API Support:"})," Ensure that the browser supports the View Transition API."]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:"Wrap State Updates with startViewTransition:"})," Use document.startViewTransition to wrap the state update function. This ensures that the transition captures both the old and new states."]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:"Force Synchronous State Updates:"})," Utilize React's flushSync to apply state changes synchronously within the transition."]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:"Assign view-transition-name:"})," Apply the view-transition-name CSS property to elements that should have a shared transition."]}),` `]}),` `,(0,e.jsx)(n.h3,{id:"example",children:(0,e.jsx)(n.a,{href:"#example",children:"Example:"})}),` `,(0,e.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#282c34",color:"#abb2bf"},tabIndex:"0","data-language":"tsx","data-theme":"one-dark-pro",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"one-dark-pro",children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:" React"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:", { "}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:"useState"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#98C379"},children:' "react"'}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:"flushSync"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#98C379"},children:' "react-dom"'}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"function"}),(0,e.jsx)(n.span,{style:{color:"#61AFEF"},children:" MyComponent"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"() {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ["}),(0,e.jsx)(n.span,{style:{color:"#E5C07B"},children:"isOpen"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#E5C07B"},children:"setIsOpen"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"] "}),(0,e.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#61AFEF"},children:" useState"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#D19A66"},children:"false"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#61AFEF"},children:" handleClick"}),(0,e.jsx)(n.span,{style:{color:"#56B6C2"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" () "}),(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:" if"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("}),(0,e.jsx)(n.span,{style:{color:"#56B6C2"},children:"!"}),(0,e.jsx)(n.span,{style:{color:"#E5C07B"},children:"document"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:"startViewTransition"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#7F848E",fontStyle:"italic"},children:" // Fallback for browsers that don't support the API"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#61AFEF"},children:" setIsOpen"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#56B6C2"},children:"!"}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:"isOpen"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E5C07B"},children:" document"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#61AFEF"},children:"startViewTransition"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"(() "}),(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#61AFEF"},children:" flushSync"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"(() "}),(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#61AFEF"},children:" setIsOpen"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#56B6C2"},children:"!"}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:"isOpen"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" });"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" });"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:"button"}),(0,e.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:" onClick"}),(0,e.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:"handleClick"}),(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:">Toggle"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:"div"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:" style"}),(0,e.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:" viewTransitionName"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(n.span,{style:{color:"#98C379"},children:'"my-transition"'}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:" display"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:"isOpen"}),(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:" ?"}),(0,e.jsx)(n.span,{style:{color:"#98C379"},children:' "block"'}),(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:" :"}),(0,e.jsx)(n.span,{style:{color:"#98C379"},children:' "none"'}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }"}),(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" Content to show or hide"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"}"})})]})})}),` `,(0,e.jsx)(n.p,{children:"In this example, when the button is clicked, the handleClick function initiates a view transition that smoothly toggles the visibility of the content."}),` `,(0,e.jsx)(n.h2,{id:"using-reacts-experimental-viewtransition-component",children:(0,e.jsx)(n.a,{href:"#using-reacts-experimental-viewtransition-component",children:"Using React's Experimental ViewTransition Component"})}),` `,(0,e.jsxs)(n.p,{children:["React has introduced an experimental ",(0,e.jsx)(n.code,{children:""})," component that simplifies the integration of the View Transition API. This component automatically handles the application of view-transition-name and manages the timing of transitions."]}),` `,(0,e.jsx)(n.h3,{id:"example-1",children:(0,e.jsx)(n.a,{href:"#example-1",children:"Example:"})}),` `,(0,e.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#282c34",color:"#abb2bf"},tabIndex:"0","data-language":"tsx","data-theme":"one-dark-pro",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"one-dark-pro",children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:" React"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:", {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:" useState"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:" unstable_ViewTransition"}),(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:" as"}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:" ViewTransition"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"} "}),(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#98C379"},children:' "react"'}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"function"}),(0,e.jsx)(n.span,{style:{color:"#61AFEF"},children:" MyComponent"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"() {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ["}),(0,e.jsx)(n.span,{style:{color:"#E5C07B"},children:"isOpen"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#E5C07B"},children:"setIsOpen"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"] "}),(0,e.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#61AFEF"},children:" useState"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#D19A66"},children:"false"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#61AFEF"},children:" handleClick"}),(0,e.jsx)(n.span,{style:{color:"#56B6C2"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" () "}),(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E5C07B"},children:" React"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#61AFEF"},children:"startTransition"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"(() "}),(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#61AFEF"},children:" setIsOpen"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#56B6C2"},children:"!"}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:"isOpen"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" });"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:"button"}),(0,e.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:" onClick"}),(0,e.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:"handleClick"}),(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:">Toggle"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#E5C07B"},children:"ViewTransition"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:">"}),(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:"isOpen"}),(0,e.jsx)(n.span,{style:{color:"#56B6C2"},children:" &&"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:">Content to show"}),(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:""})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"}"})})]})})}),` `,(0,e.jsxs)(n.p,{children:["In this example, the ",(0,e.jsx)(n.code,{children:""})," component wraps the content that should participate in the transition. The handleClick function uses React.startTransition to initiate the state change, ensuring that the transition is handled smoothly."]}),` `,(0,e.jsx)(n.h2,{id:"customizing-transitions-with-css",children:(0,e.jsx)(n.a,{href:"#customizing-transitions-with-css",children:"Customizing Transitions with CSS"})}),` `,(0,e.jsx)(n.p,{children:"To customize the animations of view transitions, you can define CSS animations targeting the ::view-transition-old and ::view-transition-new pseudo-elements."}),` `,(0,e.jsx)(n.h3,{id:"example-2",children:(0,e.jsx)(n.a,{href:"#example-2",children:"Example:"})}),` `,(0,e.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#282c34",color:"#abb2bf"},tabIndex:"0","data-language":"css","data-theme":"one-dark-pro",children:(0,e.jsxs)(n.code,{"data-language":"css","data-theme":"one-dark-pro",children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"::view-transition-old("}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:"my-transition"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"),"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"::view-transition-new("}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:"my-transition"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" animation-duration: "}),(0,e.jsx)(n.span,{style:{color:"#D19A66"},children:"0.5"}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:"s"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" animation-timing-function: "}),(0,e.jsx)(n.span,{style:{color:"#D19A66"},children:"ease-in-out"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"}"})})]})})}),` `,(0,e.jsx)(n.p,{children:"This CSS snippet customizes the duration and timing function of the transition for elements with the view-transition-name set to 'my-transition'."}),` `,(0,e.jsx)(n.h2,{id:"browser-support-and-fallbacks",children:(0,e.jsx)(n.a,{href:"#browser-support-and-fallbacks",children:"Browser Support and Fallbacks"})}),` `,(0,e.jsx)(n.p,{children:"As of April 2025, the View Transition API is supported in Chromium-based browsers. For browsers that do not support the API, it's essential to implement fallbacks to ensure a consistent user experience."}),` `,(0,e.jsx)(n.h3,{id:"fallback-example",children:(0,e.jsx)(n.a,{href:"#fallback-example",children:"Fallback Example:"})}),` `,(0,e.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#282c34",color:"#abb2bf"},tabIndex:"0","data-language":"tsx","data-theme":"one-dark-pro",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"one-dark-pro",children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#61AFEF"},children:" handleClick"}),(0,e.jsx)(n.span,{style:{color:"#56B6C2"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" () "}),(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:" if"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("}),(0,e.jsx)(n.span,{style:{color:"#56B6C2"},children:"!"}),(0,e.jsx)(n.span,{style:{color:"#E5C07B"},children:"document"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:"startViewTransition"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#7F848E",fontStyle:"italic"},children:" // Fallback behavior"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#61AFEF"},children:" setIsOpen"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#56B6C2"},children:"!"}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:"isOpen"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E5C07B"},children:" document"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#61AFEF"},children:"startViewTransition"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"(() "}),(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#61AFEF"},children:" flushSync"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"(() "}),(0,e.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#61AFEF"},children:" setIsOpen"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#56B6C2"},children:"!"}),(0,e.jsx)(n.span,{style:{color:"#E06C75"},children:"isOpen"}),(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" });"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:" });"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#ABB2BF"},children:"};"})})]})})}),` `,(0,e.jsx)(n.p,{children:"In this fallback, if the startViewTransition method is not available, the state update occurs without the transition, ensuring functionality remains intact."}),` `,(0,e.jsx)(n.hr,{})]})}function g(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,Object.assign({},l,{children:(0,e.jsx)(d,l)})):d(l)}var f=g;return u(E);})(); ;return Component;