问答

requestAnimationFrame(callback)的callback是在当前帧还是下一

作者:admin 2021-06-07 我要评论

下面代码,requestAnimationFrame能等到下一帧,不应该是当前帧吗? // 获取初始位置var first = el.getBoundingClientRect();// 为元素指定一个样式,让元素在...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

下面代码,requestAnimationFrame能等到下一帧,不应该是当前帧吗?

// 获取初始位置
var first = el.getBoundingClientRect();
// 为元素指定一个样式,让元素在最终位置上
el.classList.add('totes-at-the-end');
// 获取最终位置
var last = el.getBoundingClientRect();
// 如果有必要也可以对其他样式进行计算,但最好坚持只进行 transform 和 opacity 相关的计算
var invert = first.top - last.top;
// 反转
el.style.transform = 'translateY(' + invert + 'px)';

// 等到下一帧,也就是其他所有的样式都已经被应用
requestAnimationFrame(function() {
 // 添加动画相关的设置 
 el.classList.add('animate-on-transforms');
 // 开始动画
 el.style.transform = '';
});
// 结束时清理
el.addEventListener('transitionend', tidyUpAnimations);
###

文档里面定义的是下一次重绘之前调用,所以他更新的是下一帧。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • PHP-fpm怎么实现进程间同步与互斥的?

    PHP-fpm怎么实现进程间同步与互斥的?

  • ts类型问题

    ts类型问题

  • js不带引号的对象格式字符串怎么转为对

    js不带引号的对象格式字符串怎么转为对

  • Number.prototype.toFixed() 四舍五入

    Number.prototype.toFixed() 四舍五入

腾讯云代理商
海外云服务器