Skip to content

Instantly share code, notes, and snippets.

@blessdyb

blessdyb/the-rafpolyfill.js

Forked from getify/the-rafpolyfill.js
Created February 16, 2021 05:49
Show Gist options
  • Save blessdyb/9d3ba8f09c792c671752f72990271580 to your computer and use it in GitHub Desktop.
Save blessdyb/9d3ba8f09c792c671752f72990271580 to your computer and use it in GitHub Desktop.
Download ZIP
setTimeout vs. nested-RAF
Raw
the-rafpolyfill.js
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller
// fixes from Paul Irish and Tino Zijdel
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
})();
Raw
the.html
<!DOCTYPE html>
<html>
<head>
<style>
#foobar { position:absolute; left:0px; top:0px; width:200px; height:75px; background-color:#aaa;
-moz-transition: -moz-transform 0.3s; -moz-transform: translate(200px, 5px) translateZ(0px) scale(1, 1); -moz-transform-origin: 0px 0px;
-webkit-transition: -webkit-transform 0.3s; -webkit-transform: translate(200px, 5px) translateZ(0px) scale(1, 1); -webkit-transform-origin: 0px 0px;
}
#foobar.hidden {
-moz-transition: -moz-transform 0.3s; -moz-transform: translate(200px, -100px) translateZ(0px) scale(1, 1); -moz-transform-origin: 0px 0px;
-webkit-transition: -webkit-transform 0.3s; -webkit-transform: translate(200px, -100px) translateZ(0px) scale(1, 1); -webkit-transform-origin: 0px 0px;
}
</style>
</head>
<body>
<div id="foobar"></div>
</body>
</html>
Raw
the.js
function hide() {
var foobar = document.getElementById("foobar");
foobar.className = "hidden";
foobar.addEventListener("transitionend",do_hide,true);
foobar.addEventListener("webkitTransitionEnd",do_hide,true);
}
function do_hide() {
var foobar = document.getElementById("foobar");
foobar.style.display = "none";
foobar.removeEventListener("transitionend",do_hide,true);
foobar.removeEventListener("webkitTransitionEnd",do_hide,true);
}
// ****************************************
// this is ugly!
function show_1() {
var foobar = document.getElementById("foobar");
foobar.style.display = "block";
setTimeout(function(){
foobar.className = ""; // remove 'hidden' class
},50);
}
// BUT, is this actually better, or worse?
function show_2() {
var foobar = document.getElementById("foobar");
foobar.style.display = "block";
requestAnimationFrame(function(){
requestAnimationFrame(function(){
foobar.className = ""; // remove 'hidden' class
});
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment