55 lines
2.1 KiB
HTML
55 lines
2.1 KiB
HTML
<style>
|
|
div {
|
|
width: 50px;
|
|
height: 50px;
|
|
background-color: yellow;
|
|
}
|
|
|
|
div.green {
|
|
width: 100px;
|
|
background-color: green;
|
|
-webkit-transition-property: background-color;
|
|
-webkit-transition-duration: 5s;
|
|
}
|
|
|
|
div.square {
|
|
width: 100px;
|
|
height: 100px;
|
|
-webkit-transition-property: height;
|
|
-webkit-transition-duration: 2s;
|
|
}
|
|
</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:"green", description:"instantly change into a rectangle and fade from yellow to green over 5 seconds"},
|
|
{className:"", description:"instantly change into a small yellow square"},
|
|
{className:"square", description:"instantly change into a yellow rectangle and then animate into a big yellow square over 2 seconds"},
|
|
{className:"green", description:"instantly change into a yellow rectangle and then animate to a green rectangle over 5 seconds"},
|
|
{className:"", description:"instantly change into a small yellow square"},
|
|
{className:"green", description:"instantly change into a yellow rectangle and fade from yellow to green over 5 seconds"},
|
|
{className:"square", description:"instantly change to a yellow rectangle and then animate into a large yellow square over 2 seconds"},
|
|
{className:"", description:"instantly change into a small yellow 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>
|