/**
* 动画函数
* @param {node} ele 要运动的元素
* @param {object} obj 要运动的属性组成的对象
*/
function move(ele,obj,fn){
var k = 0
var n = 0
// 遍历对象,在循环中创建定时器
for(let attr in obj){
k++
// 在循环中执行异步代码,所以要将循环的var换成let
let timerId = setInterval(function(){
var target = obj[attr]
// 让left、top、width ... 通用
var style = getStyle(ele,attr) // 获取到的属性是 XXpx
if(attr === 'opacity'){
style *= 100
target *= 100
}
// 取整
style = parseInt(style)
// 增加
// 计算运动的速度
// 求出距离目的地还有多远
var diff = target - style;
// 不论远近,都按照一定的比例去运动
// 求比例
var speed = diff/20
// 这样走,距离目的地越来越近,但是走的也越来越小,永远到不了目的地
// speed = Math.ceil(speed)
if(speed>0){
speed = Math.ceil(speed)
}else{
speed = Math.floor(speed)
}
style += speed
// 做判断
if(style === target){
style = target
if(attr === 'opacity'){
ele.style[attr] = style/100
}else{
ele.style[attr] = style +"px"
}
// 清除定时器
clearInterval(timerId)
n++
// 当n和k相等的时候就表示所有运动都结束了
if(k === n){
// console.log("所有运动都结束了");
// 运动结束之后我们要执行的代码不确定
// 调用函数就好
fn()
}
}else{
if(attr === 'opacity'){
ele.style[attr] = style/100
}else{
ele.style[attr] = style +"px"
}
}
},20)
}
}