instant-transition.https.html (965B)
1 <!doctype html> 2 <script> 3 onpageswap = e => { 4 window.opener.did_swap(e.viewTransition ? "with-transition" : "without-transition"); 5 } 6 7 window.onload = async () => { 8 await new Promise((resolve) => requestAnimationFrame(resolve)); 9 const pause_condition = new Date().valueOf(); 10 const a = document.createElement("a"); 11 a.href = `?pause=${pause_condition}`; 12 document.body.appendChild(a); 13 a.click(); 14 await new Promise((resolve) => requestAnimationFrame(resolve)); 15 const transition = document.startViewTransition(() => { 16 document.body.classList.add("vt-done"); 17 }); 18 19 await transition.ready; 20 window.opener.did_activate_transition(pause_condition); 21 try { 22 await transition.finished; 23 } catch (e) { 24 window.opener.did_finish_transition("skip"); 25 } finally { 26 window.opener.did_finish_transition("success"); 27 } 28 }; 29 30 </script> 31 <style> 32 @view-transition { 33 navigation: auto; 34 } 35 36 * { 37 animation-duration:800ms; 38 } 39 40 </style> 41 </body>