CSSトランジションを開始するためにアニメーションフレームをリクエストすることは意味がありますか?
たとえば、Mozilla CSSトランジションページには、次のjsfiddleの例へのリンクが含まれています。
CSS:
#foo{
border-radius:50px;
width:50px;
height:50px;
background:#c00;
position:absolute;
top:0;
left:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
JavaScript:
var f = document.getElementById('foo');
document.addEventListener('click', function(ev){
f.style.left = (ev.clientX-25)+'px';
f.style.top = (ev.clientY-25)+'px';
},false);
この例を次のように書き直すのは意味がありますか?(このjsfiddleを参照してください)
JavaScript:
var rAF = window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame;
var f = document.getElementById('foo');
document.addEventListener('click', function(ev){
rAF(function() {
f.style.left = (ev.clientX-25)+'px';
f.style.top = (ev.clientY-25)+'px';
});
},false);
答えてくれてありがとう。