transitions.html 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <style>
  2. div {
  3. width: 50px;
  4. height: 50px;
  5. background-color: yellow;
  6. }
  7. div.green {
  8. width: 100px;
  9. background-color: green;
  10. transition-property: background-color;
  11. transition-duration: 5s;
  12. }
  13. div.square {
  14. width: 100px;
  15. height: 100px;
  16. transition-property: height;
  17. transition-duration: 2s;
  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:"green", description:"instantly change into a rectangle and fade from yellow to green over 5 seconds"},
  30. {className:"", description:"instantly change into a small yellow square"},
  31. {className:"square", description:"instantly change into a yellow rectangle and then animate into a big yellow square over 2 seconds"},
  32. {className:"green", description:"instantly change into a yellow rectangle and then animate to a green rectangle over 5 seconds"},
  33. {className:"", description:"instantly change into a small yellow square"},
  34. {className:"green", description:"instantly change into a yellow rectangle and fade from yellow to green over 5 seconds"},
  35. {className:"square", description:"instantly change to a yellow rectangle and then animate into a large yellow square over 2 seconds"},
  36. {className:"", description:"instantly change into a small yellow square"}
  37. ];
  38. document.getElementById("description").innerText = transitions[0].description;
  39. function transition()
  40. {
  41. var target = document.getElementById("target");
  42. target.className = transitions[state].className;
  43. state++;
  44. if (state < transitions.length)
  45. document.getElementById("description").innerText = transitions[state].description;
  46. else {
  47. document.getElementById("instructions").innerText = "Done.";
  48. }
  49. }
  50. </script>