shared-transition-half.manual.html (1155B)
1 <!DOCTYPE html> 2 <html> 3 <title>View transitions of different elements and shapes</title> 4 <link rel="help" href="https://github.com/vmpstr/view-transitions"> 5 <link rel="author" href="mailto:vmpstr@chromium.org"> 6 7 <style> 8 body { 9 background: lightpink; 10 overflow: hidden; 11 } 12 13 input { 14 position: absolute; 15 left: 8px; 16 top: 8px; 17 z-index: 10; 18 } 19 20 .top { 21 top: 0px; 22 } 23 .bottom { 24 bottom: 0px; 25 } 26 27 div { 28 position: absolute; 29 left: 0px; 30 right: 0px; 31 height: 40vh; 32 background: green; 33 contain: paint; 34 } 35 </style> 36 37 <input id=toggle type=button value="Toggle!"></input> 38 <div id=target class=top> 39 The green div should alternate being at the bottom and at the top. 40 Other than green and pink background no other colors should appear. 41 </div> 42 43 <script> 44 let classes = ["top", "bottom"] 45 let i = 0; 46 async function runAnimation() { 47 target.style.viewTransitionName = "target"; 48 let t = document.startViewTransition(() => { 49 target.classList.remove(classes[i]); 50 i = (i + 1) % classes.length; 51 target.classList.add(classes[i]); 52 }); 53 await t.finished; 54 } 55 56 function init() { 57 toggle.addEventListener("click", runAnimation); 58 } 59 onload = init; 60 </script>