写一个ES6性能好的运动框架

最新推荐文章于 2021-11-02 09:00:45 发布

AnlanJion

最新推荐文章于 2021-11-02 09:00:45 发布

阅读量461

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/AnlanJion/article/details/80720925

本文介绍了一种使用JavaScript实现CSS属性动画的方法。通过自定义函数获取元素当前CSS样式，并结合requestAnimationFrame进行平滑过渡，实现了对指定元素的多个CSS属性进行动画效果设置。支持设置动画时间及回调函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function getCss(el,attr){
retrun el.currentTarget?
el.currentTarget[attr]:
el.getComputedStyle(el)[attr]
}

function animate(el,json,time,cb){
let startJson={}；
let targetJson={};
for(let key in json){
startJson[key]=parseFloat(getCss(el,key))
targetJson[key]=parseFloat(Json[key]))

}
let startTime=new Date();
let px;
move();
function move(){
let prop=(new Date-startTime)/time;
if(prop<1){

for(key in json){
px=key==="opacity"?"":"px";

el.style[key]=prop*(targetJson[key]-startJson[key])+startJson+px


}
requestAnimationFrame(move)

}else{
for(key in json){
px=key==="opacity"?"":"px";

el.style[key]=targetJson[key]+px

}
cb&&cb.call(el)

}
}
}