| <!DOCTYPE html> |
| <html> |
| <title>View transitions of different elements and shapes</title> |
| <link rel="help" href="https://github.com/vmpstr/view-transitions"> |
| <link rel="author" href="mailto:[email protected]"> |
| |
| <style> |
| body { |
| background: lightpink; |
| } |
| |
| #container { |
| width: max-content; |
| position: relative; |
| } |
| |
| .left { |
| left: 50px; |
| } |
| .right { |
| left: 550px; |
| } |
| |
| div { |
| margin: 10px; |
| contain: paint; |
| } |
| |
| .square { |
| width: 100px; |
| height: 100px; |
| background: green; |
| } |
| .rounded { |
| width: 100px; |
| height: 100px; |
| background: green; |
| border-radius: 20%; |
| } |
| .translucent { |
| opacity: 0.5; |
| } |
| .text { |
| width: 100px; |
| height: 100px; |
| } |
| </style> |
| |
| <input id=toggle type=button value="Toggle!"></input> |
| <span>Same shape should move right and left</span> |
| <div id=container class=left> |
| <div id=e1 class=square></div> |
| <div id=e2 class=rounded></div> |
| <div id=e3 class="square translucent"></div> |
| <div id=e4 class="rounded translucent"></div> |
| <div id=e5 class=text>Lorem Ipsum</div> |
| </div> |
| |
| <script> |
| let classes = ["left", "right"] |
| let i = 0; |
| async function runAnimation() { |
| e1.style.viewTransitionName = "e1"; |
| e2.style.viewTransitionName = "e2"; |
| e3.style.viewTransitionName = "e3"; |
| e4.style.viewTransitionName = "e4"; |
| e5.style.viewTransitionName = "e5"; |
| let t = document.startViewTransition(() => { |
| container.classList.remove(classes[i]); |
| i = (i + 1) % classes.length; |
| container.classList.add(classes[i]); |
| }); |
| await t.finished; |
| } |
| |
| function init() { |
| toggle.addEventListener("click", runAnimation); |
| } |
| onload = init; |
| </script> |
