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> 53
