| OLD | NEW |
| 1 <!doctype html> | 1 <!doctype html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <meta name="viewport" content="user-scalable:no"> | 4 <meta name="viewport" content="user-scalable:no"> |
| 5 <style type="text/css"> | 5 <style type="text/css"> |
| 6 body { height: 1500px; } | 6 body { height: 1500px; } |
| 7 #center { | 7 #center { |
| 8 position: fixed; | 8 position: fixed; |
| 9 left: 40%;; | 9 left: 40%;; |
| 10 width: 50%; | 10 width: 50%; |
| (...skipping 15 matching lines...) Expand all Loading... |
| 26 -webkit-transition: -webkit-transform 1s; | 26 -webkit-transition: -webkit-transform 1s; |
| 27 } | 27 } |
| 28 | 28 |
| 29 </style> | 29 </style> |
| 30 <script> | 30 <script> |
| 31 'use strict'; | 31 'use strict'; |
| 32 window.animationDone = false; | 32 window.animationDone = false; |
| 33 function makeAnimation() { | 33 function makeAnimation() { |
| 34 var centerEl = document.querySelector('#center'); | 34 var centerEl = document.querySelector('#center'); |
| 35 centerEl.style.webkitTransform = 'scale(1.0, 1.0)'; | 35 centerEl.style.webkitTransform = 'scale(1.0, 1.0)'; |
| 36 console.time('Interaction.CenterAnimation/is_smooth'); | 36 console.time('Interaction.CenterAnimation'); |
| 37 centerEl.addEventListener('transitionend', function() { | 37 centerEl.addEventListener('transitionend', function() { |
| 38 console.timeEnd('Interaction.CenterAnimation/is_smooth'); | 38 console.timeEnd('Interaction.CenterAnimation'); |
| 39 var drawerEl = document.querySelector('#drawer'); | 39 var drawerEl = document.querySelector('#drawer'); |
| 40 drawerEl.style.webkitTransform = 'translate3D(0, 0, 0)'; | 40 drawerEl.style.webkitTransform = 'translate3D(0, 0, 0)'; |
| 41 console.time('Interaction.DrawerAnimation/is_smooth'); | 41 console.time('Interaction.DrawerAnimation'); |
| 42 drawerEl.addEventListener('transitionend', function() { | 42 drawerEl.addEventListener('transitionend', function() { |
| 43 console.timeEnd('Interaction.DrawerAnimation/is_smooth'); | 43 console.timeEnd('Interaction.DrawerAnimation'); |
| 44 window.animationDone = true; | 44 window.animationDone = true; |
| 45 }); | 45 }); |
| 46 }); | 46 }); |
| 47 } | 47 } |
| 48 </script> | 48 </script> |
| 49 | 49 |
| 50 <script> | 50 <script> |
| 51 'use strict'; | 51 'use strict'; |
| 52 var jankMs = 100; | 52 var jankMs = 100; |
| 53 var slowMs = 200; | 53 var slowMs = 200; |
| (...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 87 </div> | 87 </div> |
| 88 <button type="button" id="jank-button" onclick="makeJank()"> | 88 <button type="button" id="jank-button" onclick="makeJank()"> |
| 89 Click or tap this to make jank of 100ms (approximately). | 89 Click or tap this to make jank of 100ms (approximately). |
| 90 </div> | 90 </div> |
| 91 <button type="button" id="slow-button" onclick="makeSlow()"> | 91 <button type="button" id="slow-button" onclick="makeSlow()"> |
| 92 Click or tap this to make wait 200ms (approximately). | 92 Click or tap this to make wait 200ms (approximately). |
| 93 </div> | 93 </div> |
| 94 | 94 |
| 95 </body> | 95 </body> |
| 96 </html> | 96 </html> |
| OLD | NEW |