root-element-transition-iframe.html (1424B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/common/rendering-utils.js"></script> 5 <style> 6 @view-transition { navigation: auto; } 7 8 .hidden { 9 width: 10px; 10 height: 10px; 11 view-transition-name: hidden; 12 background: green; 13 } 14 html::view-transition-group(hidden) { animation-duration: 300s; } 15 html::view-transition-image-pair(hidden) { opacity: 0; } 16 17 html::view-transition-old(root) { 18 width: 50vw; 19 height: 100vh; 20 position: fixed; 21 left: 0px; 22 top: 0px; 23 opacity: 1; 24 animation: unset; 25 } 26 html::view-transition-new(root) { 27 width: 50vw; 28 height: 100vh; 29 position: fixed; 30 left: 50vw; 31 top: 0px; 32 opacity: 1; 33 animation: unset; 34 } 35 </style> 36 <script> 37 onload = () => { 38 window.parent.postMessage("loaded", '*'); 39 } 40 41 const params = new URLSearchParams(location.search); 42 if (params.has("blue")) 43 document.documentElement.style.background = "blue"; 44 else if (params.has("grey")) 45 document.documentElement.style.background = "grey"; 46 47 onpagereveal = async (e) => { 48 if (e.viewTransition != null) { 49 await e.viewTransition.ready; 50 window.parent.postMessage("transition", '*'); 51 } 52 } 53 54 window.addEventListener( 55 "message", async (e) => { 56 if (e.data === "checkrendering") { 57 await waitForAtLeastOneFrame(); 58 await waitForAtLeastOneFrame(); 59 window.parent.postMessage("rendered", '*'); 60 } 61 } 62 ); 63 </script> 64 </head> 65 <div class="hidden"></div> 66 </html>