tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

shared-transition-author-style.manual.html (1874B)

      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  background: green;
     23 }
     24 .bottom {
     25  bottom: 0px;
     26  background: blue;
     27 }
     28 
     29 div {
     30  position: absolute;
     31  left: 0px;
     32  right: 0px;
     33  height: 40vh;
     34  contain: paint;
     35 }
     36 </style>
     37 
     38 <input id=toggle type=button value="Toggle!"></input>
     39 <div id=target class=top>
     40 The div should alternate being at the bottom and at the top.
     41 The color at the top is green and bottom is blue.
     42 During the animation, the div has an (x, y) offset and its
     43 content is a blend of green and blue. There is also a grey
     44 background with a slight offset from the top.
     45 </div>
     46 
     47 <script>
     48 let classes = ["top", "bottom"]
     49 let i = 0;
     50 
     51 let transitionStyle =
     52  `html::view-transition {
     53    top: 50px;
     54  }
     55 
     56  html::view-transition-group(root) {
     57    background-color: grey;
     58  }
     59 
     60  html::view-transition-group(target) {
     61    left: 50px;
     62  }
     63 
     64  html::view-transition-old(target) {
     65    opacity: 0.5;
     66    animation-name: none;
     67  }
     68 
     69  html::view-transition-new(target) {
     70    opacity: 0.5;
     71  }
     72  `
     73 
     74 let pseudoStyle = document.createElement('style');
     75 pseudoStyle.appendChild(document.createTextNode(transitionStyle));
     76 
     77 async function runAnimation() {
     78  target.style.viewTransitionName = "target";
     79  let t = document.startViewTransition(() => {
     80    target.classList.remove(classes[i]);
     81    i = (i + 1) % classes.length;
     82    target.classList.add(classes[i]);
     83 
     84    document.head.appendChild(pseudoStyle);
     85  });
     86  await t.finished;
     87  document.head.removeChild(pseudoStyle)
     88 }
     89 
     90 function init() {
     91  toggle.addEventListener("click", runAnimation);
     92 }
     93 onload = init;
     94 </script>