transition-to-prerender.html (1187B)
1 <!DOCTYPE html> 2 <title>View transitions: prerender navigation helper</title> 3 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 4 <link rel="author" href="mailto:vmpstr@chromium.org"> 5 <script src="/speculation-rules/prerender/resources/utils.js"></script> 6 <style> 7 @view-transition { navigation: auto; } 8 html { background: red; } 9 div { 10 width: 200px; 11 height: 200px; 12 background: red; 13 color: black; 14 position: absolute; 15 top: 40px; 16 right: 8px; 17 view-transition-name: target; 18 } 19 ::view-transition { 20 background: lightblue; 21 } 22 ::view-transition-group(root) { 23 visibility: hidden; 24 animation-duration: 500s; 25 } 26 ::view-transition-group(target) { 27 animation-play-state: paused; 28 } 29 ::view-transition-new(target) { 30 animation: unset; 31 opacity: 1; 32 } 33 ::view-transition-old(target) { 34 animation: unset; 35 opacity: 0; 36 } 37 </style> 38 <div id=target> 39 There should be a green square on the left side of the screen, 40 on a field of lightblue. There should be no red in the final state. 41 </div> 42 <script> 43 if (document.prerendering) { 44 target.style.background = "green"; 45 } 46 const channel = new PrerenderChannel('prerender-channel'); 47 channel.postMessage('loaded!'); 48 </script>