transitions2.html 1.8 KB

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