| OLD | NEW |
| 1 <style> | 1 <style> |
| 2 div { | 2 div { |
| 3 width: 50px; | 3 width: 50px; |
| 4 height: 50px; | 4 height: 50px; |
| 5 background-color: yellow; | 5 background-color: yellow; |
| 6 } | 6 } |
| 7 | 7 |
| 8 div.green { | 8 div.green { |
| 9 width: 100px; | 9 width: 100px; |
| 10 background-color: green; | 10 background-color: green; |
| 11 -webkit-transition-property: background-color; | 11 transition-property: background-color; |
| 12 -webkit-transition-duration: 5s; | 12 transition-duration: 5s; |
| 13 } | 13 } |
| 14 | 14 |
| 15 div.square { | 15 div.square { |
| 16 width: 100px; | 16 width: 100px; |
| 17 height: 100px; | 17 height: 100px; |
| 18 -webkit-transition-property: height; | 18 transition-property: height; |
| 19 -webkit-transition-duration: 2s; | 19 transition-duration: 2s; |
| 20 } | 20 } |
| 21 </style> | 21 </style> |
| 22 <p id="instructions"> | 22 <p id="instructions"> |
| 23 When you click the Change button, the shape will | 23 When you click the Change button, the shape will |
| 24 <span id="description"></span>. | 24 <span id="description"></span>. |
| 25 <button style="display: block;" onclick="transition()">Change</button> | 25 <button style="display: block;" onclick="transition()">Change</button> |
| 26 </p> | 26 </p> |
| 27 <div id="target"></div> | 27 <div id="target"></div> |
| 28 <script> | 28 <script> |
| 29 var state = 0; | 29 var state = 0; |
| (...skipping 15 matching lines...) Expand all Loading... |
| 45 var target = document.getElementById("target"); | 45 var target = document.getElementById("target"); |
| 46 target.className = transitions[state].className; | 46 target.className = transitions[state].className; |
| 47 state++; | 47 state++; |
| 48 if (state < transitions.length) | 48 if (state < transitions.length) |
| 49 document.getElementById("description").innerText = transitions[state
].description; | 49 document.getElementById("description").innerText = transitions[state
].description; |
| 50 else { | 50 else { |
| 51 document.getElementById("instructions").innerText = "Done."; | 51 document.getElementById("instructions").innerText = "Done."; |
| 52 } | 52 } |
| 53 } | 53 } |
| 54 </script> | 54 </script> |
| OLD | NEW |