shared-transition-shapes.manual.html (1560B)
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 } 11 12 #container { 13 width: max-content; 14 position: relative; 15 } 16 17 .left { 18 left: 50px; 19 } 20 .right { 21 left: 550px; 22 } 23 24 div { 25 margin: 10px; 26 contain: paint; 27 } 28 29 .square { 30 width: 100px; 31 height: 100px; 32 background: green; 33 } 34 .rounded { 35 width: 100px; 36 height: 100px; 37 background: green; 38 border-radius: 20%; 39 } 40 .translucent { 41 opacity: 0.5; 42 } 43 .text { 44 width: 100px; 45 height: 100px; 46 } 47 </style> 48 49 <input id=toggle type=button value="Toggle!"></input> 50 <span>Same shape should move right and left</span> 51 <div id=container class=left> 52 <div id=e1 class=square></div> 53 <div id=e2 class=rounded></div> 54 <div id=e3 class="square translucent"></div> 55 <div id=e4 class="rounded translucent"></div> 56 <div id=e5 class=text>Lorem Ipsum</div> 57 </div> 58 59 <script> 60 let classes = ["left", "right"] 61 let i = 0; 62 async function runAnimation() { 63 e1.style.viewTransitionName = "e1"; 64 e2.style.viewTransitionName = "e2"; 65 e3.style.viewTransitionName = "e3"; 66 e4.style.viewTransitionName = "e4"; 67 e5.style.viewTransitionName = "e5"; 68 let t = document.startViewTransition(() => { 69 container.classList.remove(classes[i]); 70 i = (i + 1) % classes.length; 71 container.classList.add(classes[i]); 72 }); 73 await t.finished; 74 } 75 76 function init() { 77 toggle.addEventListener("click", runAnimation); 78 } 79 onload = init; 80 </script>