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).