pagereveal-setup-transition.html (1880B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>View transitions: setup transition from pagereveal</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 5 <link rel="author" href="mailto:bokan@chromium.org"> 6 <link rel="match" href="pagereveal-setup-transition-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <script> 9 const params = new URLSearchParams(location.search); 10 const is_new_page = params.has('new'); 11 if (is_new_page) { 12 document.documentElement.classList.add('newPage'); 13 14 addEventListener('pagereveal', e => { 15 // Setup the view-transition-name from the event. Ensure this is not 16 // too late to be discovered to create a shared element animation. 17 document.getElementById('target').classList.add('transition'); 18 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 19 }); 20 } else { 21 onload = () => { 22 document.getElementById('target').classList.add('transition'); 23 requestAnimationFrame(() => requestAnimationFrame(() => { 24 location.replace(location.href + '?new'); 25 })); 26 }; 27 } 28 </script> 29 <style> 30 @view-transition { 31 navigation: auto; 32 } 33 #target { 34 width: 100px; 35 height: 100px; 36 background-color: limegreen; 37 position: absolute; 38 left: 20px; 39 top: 100px; 40 } 41 #target.transition { 42 view-transition-name: target; 43 } 44 .newPage #target { 45 left: 300px; 46 } 47 /* Hold the transition in the ending location indefinitely. If the transition 48 * name was correctly captured in the new page, this will cause the green box 49 * to locate at the new position (left: 300px) */ 50 ::view-transition-group(target) { 51 animation-duration: 300s; 52 animation-timing-function: steps(1, jump-start); 53 } 54 /* Ensure view-transition snapshots are easily distinguished from live DOM */ 55 :root { 56 view-transition-name: unset; 57 } 58 ::view-transition { 59 background-color: thistle; 60 } 61 </style> 62 <div id="target"></div> 63 </html>