ManualTests/transitions.html

   1 <style>
   2     div {
   3         width: 50px;
   4         height: 50px;
   5         background-color: yellow;
   6     }
   7
   8     div.green {
   9         width: 100px;
  10         background-color: green;
  11         -webkit-transition-property: background-color;
  12         -webkit-transition-duration: 5s;
  13     }
  14
  15     div.square {
  16         width: 100px;
  17         height: 100px;
  18         -webkit-transition-property: height;
  19         -webkit-transition-duration: 2s;
  20     }
  21 </style>
  22 <p id="instructions">
  23     When you click the Change button, the shape will
  24     <span id="description"></span>.
  25     <button style="display: block;" onclick="transition()">Change</button>
  26 </p>
  27 <div id="target"></div>
  28 <script>
  29     var state = 0;
  30     var transitions = [
  31         {className:"green", description:"instantly change into a rectangle and fade from yellow to green over 5 seconds"},
  32         {className:"", description:"instantly change into a small yellow square"},
  33         {className:"square", description:"instantly change into a yellow rectangle and then animate into a big yellow square over 2 seconds"},
  34         {className:"green", description:"instantly change into a yellow rectangle and then animate to a green rectangle over 5 seconds"},
  35         {className:"", description:"instantly change into a small yellow square"},
  36         {className:"green", description:"instantly change into a yellow rectangle and fade from yellow to green over 5 seconds"},
  37         {className:"square", description:"instantly change to a yellow rectangle and then animate into a large yellow square over 2 seconds"},
  38         {className:"", description:"instantly change into a small yellow square"}
  39     ];
  40
  41     document.getElementById("description").innerText = transitions[0].description;
  42
  43     function transition()
  44     {
  45         var target = document.getElementById("target");
  46         target.className = transitions[state].className;
  47         state++;
  48         if (state < transitions.length)
  49             document.getElementById("description").innerText = transitions[state].description;
  50         else {
  51             document.getElementById("instructions").innerText = "Done.";
  52         }
  53     }
  54 </script>