Torne (Richard Coles) | 5c87bf8 | 2012-11-14 11:46:17 +0000 | [diff] [blame] | 1 | <style> |
| 2 | div { |
| 3 | width: 50px; |
| 4 | height: 50px; |
| 5 | background-color: yellow; |
| 6 | } |
| 7 | |
| 8 | div.green { |
| 9 | width: 100px; |
| 10 | background-color: green; |
| 11 | -webkit-transition-property: background-color; |
| 12 | -webkit-transition-duration: 5s; |
| 13 | } |
| 14 | |
| 15 | div.square { |
| 16 | width: 100px; |
| 17 | height: 100px; |
| 18 | -webkit-transition-property: height; |
| 19 | -webkit-transition-duration: 2s; |
| 20 | } |
| 21 | </style> |
| 22 | <p id="instructions"> |
| 23 | When you click the Change button, the shape will |
| 24 | <span id="description"></span>. |
| 25 | <button style="display: block;" onclick="transition()">Change</button> |
| 26 | </p> |
| 27 | <div id="target"></div> |
| 28 | <script> |
| 29 | var state = 0; |
| 30 | var transitions = [ |
| 31 | {className:"green", description:"instantly change into a rectangle and fade from yellow to green over 5 seconds"}, |
| 32 | {className:"", description:"instantly change into a small yellow square"}, |
| 33 | {className:"square", description:"instantly change into a yellow rectangle and then animate into a big yellow square over 2 seconds"}, |
| 34 | {className:"green", description:"instantly change into a yellow rectangle and then animate to a green rectangle over 5 seconds"}, |
| 35 | {className:"", description:"instantly change into a small yellow square"}, |
| 36 | {className:"green", description:"instantly change into a yellow rectangle and fade from yellow to green over 5 seconds"}, |
| 37 | {className:"square", description:"instantly change to a yellow rectangle and then animate into a large yellow square over 2 seconds"}, |
| 38 | {className:"", description:"instantly change into a small yellow square"} |
| 39 | ]; |
| 40 | |
| 41 | document.getElementById("description").innerText = transitions[0].description; |
| 42 | |
| 43 | function transition() |
| 44 | { |
| 45 | var target = document.getElementById("target"); |
| 46 | target.className = transitions[state].className; |
| 47 | state++; |
| 48 | if (state < transitions.length) |
| 49 | document.getElementById("description").innerText = transitions[state].description; |
| 50 | else { |
| 51 | document.getElementById("instructions").innerText = "Done."; |
| 52 | } |
| 53 | } |
| 54 | </script> |