<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Transition Events</title>
<style type="text/css" media="screen">
#box1 {
position: relative;
width: 100px;
height: 100px;
margin: 10px;
background-color: blue;
z-index: 0;
-webkit-transition-property: left;
-webkit-transition-duration: 2s;
left: 0px;
}
#box2 {
position: relative;
width: 100px;
height: 100px;
margin: 10px;
background-color: red;
z-index: 0;
-webkit-transition-property: left;
-webkit-transition-duration: 2s;
left: 0px;
}
#log {
position: absolute;
width: 90%;
height: 200px;
overflow: scroll;
border: 1px solid black;
}
</style>
<script type="text/javascript" charset="utf-8">
var switch1 = true;
var switch2 = false;
document.addEventListener('webkitTransitionEnd', function(e) {
var id = "1";
if (switch1) {
id = "2";
}
var offset = 200;
if (switch2) {
offset = 0;
}
var box = document.getElementById("box" + id);
box.style.left = "" + offset + "px";
switch1 = !switch1;
if (!switch1) switch2 = !switch2;
logTransition(event);
}, false);
function doClick(obj)
{
var box1 = document.getElementById("box1");
box1.style.left = "200px";
}
function logTransition(event)
{
var log = document.getElementById('log');
log.innerHTML = log.innerHTML + '<br>Property: ' + event.propertyName + ' Time: ' + event.elapsedTime;
}
</script>
</head>
<body>
<h2>Transition Events</h2>
<p>Click to start transitions. Once started, transition end events should keep
things moving forever.</p>
<div id="container" onclick="doClick(this)">
<div id="box1">
</div>
<div id="box2">
</div>
</div>
<div id="log">
</div>
</body>
</html>