53 lines
1.8 KiB
HTML
53 lines
1.8 KiB
HTML
<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>
|