diff options
Diffstat (limited to 'examples')
| -rw-r--r-- | examples/animation.html | 16 | ||||
| -rw-r--r-- | examples/aspect-ratio.html | 64 |
2 files changed, 49 insertions, 31 deletions
diff --git a/examples/animation.html b/examples/animation.html index b8dfeb7..2dbefd6 100644 --- a/examples/animation.html +++ b/examples/animation.html @@ -2,7 +2,7 @@ <html> <head> <title>FastDom: Animation Example</title> - <script type="text/javascript" src="../index.js"></script> + <script type="text/javascript" src="../fastdom.min.js"></script> </head> <body> @@ -53,21 +53,25 @@ }, async: function(m) { - // Use fastdom to batch the reads and writes with exactly the same code as the 'sync' routine - fastdom.read(function() { + // Use fastdom to batch the reads + // and writes with exactly the same + // code as the 'sync' routine + fastdom.measure(function() { var top = movers[m].offsetTop; - fastdom.write(function() { + fastdom.mutate(function() { mover.setLeft(movers[m], top); }); }); }, noread: function(m) { - // Simply use the array index as the top value, so no DOM read is required + // Simply use the array index + // as the top value, so no DOM + // read is required mover.setLeft(movers[m], m); }, setLeft: function(mover, top) { - mover.style.left = ((Math.sin(top + timestamp/1000) + 1) * 500) + 'px'; + mover.style.transform = 'translateX( ' +((Math.sin(top + timestamp/1000) + 1) * 500) + 'px)'; } }; diff --git a/examples/aspect-ratio.html b/examples/aspect-ratio.html index 9832393..2856757 100644 --- a/examples/aspect-ratio.html +++ b/examples/aspect-ratio.html @@ -6,7 +6,7 @@ <style> * { - box-sizing: border-box; + box-sizing: border-box; } div { @@ -25,28 +25,37 @@ <button id="resetbtn">reset</button> <section id="perf"></section> <section id="container"></section> - <script type="text/javascript" src="../index.js"></script> + <script src="../fastdom.js"></script> <script> var n; var start; var divs; // Setup - function reset() { + function reset(done) { n = input.value; divs = []; - container.innerHTML = ''; - for (var i = 0; i < n; i++) { - var div = document.createElement('div'); - div.style.width = Math.round(Math.random() * window.innerWidth) + 'px'; - container.appendChild(div); - divs.push(div); - } + fastdom.measure(function() { + var winWidth = window.innerWidth; + + fastdom.mutate(function() { + container.innerHTML = ''; + + for (var i = 0; i < n; i++) { + var div = document.createElement('div'); + div.style.width = Math.round(Math.random() * winWidth) + 'px'; + container.appendChild(div); + divs.push(div); + } + + if (done) done(); + }); + }); } function setAspect(div, i) { - var aspect = 9/16; + var aspect = 9 / 16; var isLast = i === (n - 1); var h = div.clientWidth * aspect; @@ -58,7 +67,7 @@ } function setAspectRequestAnimationFrame(div, i) { - var aspect = 9/16; + var aspect = 9 / 16; var isLast = i === (n - 1); // READ @@ -77,15 +86,15 @@ } function setAspectFastDom(div, i) { - var aspect = 9/16; + var aspect = 9 / 16; var isLast = i === (n - 1); // READ - fastdom.read(function() { + fastdom.measure(function() { var h = div.clientWidth * aspect; // WRITE - fastdom.write(function() { + fastdom.mutate(function() { div.style.height = h + 'px'; if (isLast) { @@ -100,24 +109,29 @@ } withoutFastDom.onclick = function() { - reset(); - start = performance.now(); - divs.forEach(setAspect); + reset(function() { + start = performance.now(); + divs.forEach(setAspect); + }); }; withFastDom.onclick = function() { - reset(); - start = performance.now(); - divs.forEach(setAspectFastDom); + reset(function() { + start = performance.now(); + divs.forEach(setAspectFastDom); + }); }; withRequestAnimationFrame.onclick = function() { - reset(); - start = performance.now(); - divs.forEach(setAspectRequestAnimationFrame); + reset(function() { + start = performance.now(); + divs.forEach(setAspectRequestAnimationFrame); + }); }; - resetbtn.onclick = reset; + resetbtn.onclick = function() { + reset(); + }; </script> </body> </html> |