Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

53 lines (48 sloc) 1.852 kb
<style>
div {
width: 50px;
height: 50px;
background-color: green;
}
div.square {
width: 100px;
height: 100px;
-webkit-transition-property: height;
-webkit-transition-duration: 2s;
}
div.rectangle {
width: 100px;
height: 200px;
-webkit-transition-property: width, height;
-webkit-transition-duration: 5s;
}
</style>
<p id="instructions">
When you click the Change button, the shape will
<span id="description"></span>.
<button style="display: block;" onclick="transition()">Change</button>
</p>
<div id="target"></div>
<script>
var state = 0;
var transitions = [
{className:"rectangle", description:"animate to a large rectangle over 5 seconds."},
{className:"square", description:"animate to a square over 2 seconds. Try clicking before the first animation finishes and make sure the width doesn't do an ugly jump."},
{className:"", description:"instantly change to a small square"},
{className:"square", description:"instantly change into a small rectangle and then animate into a large square over 2 seconds"},
{className:"rectangle", description:"animate to a large rectangle over 5 seconds"},
{className:"", description:"instantly change to a small square"}
];
document.getElementById("description").innerText = transitions[0].description;
function transition()
{
var target = document.getElementById("target");
target.className = transitions[state].className;
state++;
if (state < transitions.length)
document.getElementById("description").innerText = transitions[state].description;
else {
document.getElementById("instructions").innerText = "Done.";
}
}
</script>
Jump to Line
Something went wrong with that request. Please try again.