ManualTests/transitions2.html

   1 <style>
   2     div {
   3         width: 50px;
   4         height: 50px;
   5         background-color: green;
   6     }
   7
   8     div.square {
   9         width: 100px;
  10         height: 100px;
  11         -webkit-transition-property: height;
  12         -webkit-transition-duration: 2s;
  13     }
  14
  15     div.rectangle {
  16         width: 100px;
  17         height: 200px;
  18         -webkit-transition-property: width, height;
  19         -webkit-transition-duration: 5s;
  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:"rectangle", description:"animate to a large rectangle over 5 seconds."},
  32         {className:"square", description:"animate to a square over 2 seconds.  Try clicking before the first animation finishes and make sure the width doesn't do an ugly jump."},
  33         {className:"", description:"instantly change to a small square"},
  34         {className:"square", description:"instantly change into a small rectangle and then animate into a large square over 2 seconds"},
  35         {className:"rectangle", description:"animate to a large rectangle over 5 seconds"},
  36         {className:"", description:"instantly change to a small square"}
  37     ];
  38
  39     document.getElementById("description").innerText = transitions[0].description;
  40
  41     function transition()
  42     {
  43         var target = document.getElementById("target");
  44         target.className = transitions[state].className;
  45         state++;
  46         if (state < transitions.length)
  47             document.getElementById("description").innerText = transitions[state].description;
  48         else {
  49             document.getElementById("instructions").innerText = "Done.";
  50         }
  51     }
  52 </script>