ManualTests/transition-left.html

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