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 |