js代码
/**
* 多项运动函数
* @param {元素} ele
* @param {属性对象} obj
* @param {多个方向} fn
*/
//使用方法:
// box.onclick = function () {
// animate(box, {
// left: 400,
// top: 300,
// opacity: 0.5,
// },
// function(){
// animate(box, {
// left: 0,
// top: 600,
// opacity: 1,
// })
// }
// )
// }
function animate(ele, obj, fn = function () {}) {
var k=0
for (let key in obj) {
k++
let target = obj[key]
let currentStyle=getComputedStyle(ele)[key]
if(key=='opacity'){
target*=100
currentStyle*=100
}
currentStyle=parseInt(currentStyle)
let timer=setInterval(function(){
let speed=(target-currentStyle)/17
speed=speed>0?Math.ceil(speed):Math.floor(speed)
currentStyle+=speed
if(key=='opacity'){
ele.style[key]=currentStyle/100
}else{
ele.style[key]=currentStyle+'px'
}
if(currentStyle==target)
{
clearInterval(timer)
k--
}
if(k==0){
fn()
}
},16)
}
}