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 Events</title> 8 <style type="text/css" media="screen"> 9 #box1 { 10 position: relative; 11 width: 100px; 12 height: 100px; 13 margin: 10px; 14 background-color: blue; 15 z-index: 0; 16 -webkit-transition-property: left; 17 -webkit-transition-duration: 2s; 18 left: 0px; 19 } 20 21 #box2 { 22 position: relative; 23 width: 100px; 24 height: 100px; 25 margin: 10px; 26 background-color: red; 27 z-index: 0; 28 -webkit-transition-property: left; 29 -webkit-transition-duration: 2s; 30 left: 0px; 31 } 32 33 #log { 34 position: absolute; 35 width: 90%; 36 height: 200px; 37 overflow: scroll; 38 border: 1px solid black; 39 } 40 </style> 41 <script type="text/javascript" charset="utf-8"> 42 43 var switch1 = true; 44 var switch2 = false; 45 46 document.addEventListener('webkitTransitionEnd', function(e) { 47 var id = "1"; 48 if (switch1) { 49 id = "2"; 50 } 51 var offset = 200; 52 if (switch2) { 53 offset = 0; 54 } 55 var box = document.getElementById("box" + id); 56 box.style.left = "" + offset + "px"; 57 switch1 = !switch1; 58 if (!switch1) switch2 = !switch2; 59 logTransition(event); 60 }, false); 61 62 function doClick(obj) 63 { 64 var box1 = document.getElementById("box1"); 65 box1.style.left = "200px"; 66 } 67 68 function logTransition(event) 69 { 70 var log = document.getElementById('log'); 71 log.innerHTML = log.innerHTML + '<br>Property: ' + event.propertyName + ' Time: ' + event.elapsedTime; 72 } 73 </script> 74 </head> 75 <body> 76 <h2>Transition Events</h2> 77 <p>Click to start transitions. Once started, transition end events should keep 78 things moving forever.</p> 79 <div id="container" onclick="doClick(this)"> 80 <div id="box1"> 81 </div> 82 <div id="box2"> 83 </div> 84 </div> 85 86 <div id="log"> 87 88 </div> 89 </body> 90 </html> 91
