transition-left.html 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>Transition of left property</title>
  7. <style>
  8. div {
  9. position: relative;
  10. left: 100px;
  11. height: 200px;
  12. width: 300px;
  13. background-color: #9bb;
  14. transition-property: left;
  15. transition-duration: 1s;
  16. }
  17. </style>
  18. <script type="text/javascript" charset="utf-8">
  19. var flag = true;
  20. function init() {
  21. document.getElementById("target").addEventListener("click", function(evt) {
  22. if (flag)
  23. evt.target.style.left = "300px";
  24. else
  25. evt.target.style.left = "100px";
  26. flag = !flag;
  27. }, false);
  28. }
  29. window.addEventListener("load", init, false);
  30. </script>
  31. </head>
  32. <body>
  33. <h1>Transition of 'left' property</h1>
  34. <p>The element below should move 200 pixels left or right when clicked</p>
  35. <div id="target">
  36. This element should transition.
  37. </div>
  38. </body>
  39. </html>