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