Package Exports
- qanimationframe
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (qanimationframe) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
QanimationFrame
A simple Promise wrapper for requestAnimationFrame
based on Q.
This library intend to wait for one DOM update (frame) and is easify composable as a function of Promise.
It is a proper abstraction to replace the classical setTimeout(f, 0)
hack
when wanting to get a CSS value after the browser repaint the DOM.
Checkout the Annotated Source Code
Usage
QanimationFrame
is a function which takes a DOM Element and returns a Promise of DOM Element (after one frame).
QanimationFrame(elt: DOM.Element) => Promise[DOM.Element]
Basic example
var elt = document.createElement("div");
elt.innerHTML = "Hello world";
// wait for the DOM to be ready before using the height
QanimationFrame(elt).then(function (elt) {
console.log("height="+elt.offsetHeight);
});
Composability
function createDivInBody (html) {
var elt = document.createElement("div");
elt.innerHTML = html;
document.body.appendChild(elt);
return elt;
}
var height =
Q.fcall(createDivInBody, "Hello world!<br/>How are you today?")
.then(QanimationFrame)
.then(function (elt) {
return elt.offsetHeight;
});
height.then(function(height){
console.log("height is "+height);
});
Installation
bower install qanimationframe
Also available on NPM.
Supported browsers
All browsers are supported (including IE).