多属性运动函数封装，以及淡入淡出封装

该套封装函数可以用于轮播图动画、按钮动画等较小的效果

1.封装获取css样式

/**
 * @description: 使用这个方法获取css属性
 * @param { object } ele 要获取样式的元素
 * @param { string } attr 要获取的属性
 * @return 返回要获取的属性
 */
function css(ele, attr){
    if(window.getComputedStyle){
        return getComputedStyle(ele, null)[attr]
    }else{
        return ele.currentStyle[attr]
    }
}

2.封装多属性运动函数

/**
 * 多属性运动函数
 * @param element 待运动的元素
 * @param options 多属性选项对象，如：{top: 100, left: 200, width: 300, opacity: 1}
 * @param duration 限定运动时长，可选，未传递，默认为 400ms
 * @param fn 函数，运动结束后继续执行的函数
 */
function animate(element, options, duration = 400, fn) {
  clearInterval(element.timer)
  const start = {}
  const speed = {}
  for (const key in options) {
    start[key] = parseFloat(css(element, key))
    speed[key] = (options[key] - start[key]) / duration
  }
  const startTime = Date.now()
  // 启动定时器，实现运动
  // 将定时器 id 缓存在运动的DOM对象上
  element.timer = setInterval(function() {
    // 计算实际运动时间
    const elapsed = Math.min(duration, Date.now() - startTime)
    // 遍历 options 各属性，计算当前步骤值
    for(const key in options) {
      // 计算实际运动距离
      const distance = elapsed * speed[key]
      // 设置 css 样式
      element.style[key] = start[key] + distance + (key === 'opacity' ? '' : 'px')
    }
    // 判断是否运动到达终点，如果到达终点，则停止定时器
    if (elapsed === duration) {
      clearInterval(element.timer)
      // 运动结束后，如果有需要继续执行的函数，则调用执行
      fn && fn()
    }
  }, 1000 / 60)
}

3.基于运动函数封装淡入效果

/**
 * 淡入
 * @param element 待运动的元素
 * @param duration 限定运动时长
 * @param fn 函数，运动结束后继续执行的函数
 */
function fadeIn(element, duration = 400, fn) {
  element.style.display = 'block'
  element.style.opacity = 0
  animate(element, {opacity: 1}, duration, fn)
}

4.基于运动函数封装淡出效果

/**
 * 淡出
 * @param element 待运动的元素
 * @param duration 限定运动时长
 * @param fn 函数，运动结束后继续执行的函数
 */
 function fadeOut(element, duration = 400, fn) {
  animate(element, {opacity: 0}, duration, function() {
    element.style.display = 'none'
    fn && fn()
  })
}