简单版多属性运动函数-笔记

tefuir_luo

已于 2022-09-01 09:37:55 修改

阅读量164

点赞数

分类专栏：笔记 Web学习记录文章标签：前端 javascript

于 2022-08-10 21:30:58 首次发布

本文链接：https://blog.csdn.net/weixin_43139128/article/details/126274870

版权

笔记同时被 2 个专栏收录

9 篇文章 9 订阅

订阅专栏

Web学习记录

1 篇文章 0 订阅

订阅专栏

/**
 * 简单版多属性运动函数
 * @param { ELEMENT } ele 要运动的元素
 * @param { OBJECT } target 要运动的属性（对象）
 * @param { FUNCTION } fn 运动结束的回调函数
 */
function move(ele, target, fn = () => {}) {
        let count = 0
        for (let key in target) {
            if (key === 'opacity')
                target[key] *= 100
            count++
            let timer = setInterval(() => {
                let current = key === 'opacity' ? getStyle(ele, 'opacity') * 100 : parseInt(getStyle(ele, key))
                let distance = (target[key] - current) / 10
                distance = distance > 0 ? Math.ceil(distance) : Math.floor(distance)
                if (current === target[key]) {
                    clearInterval(timer)
                    count--
                    if (!count)
                        fn()
                } else {
                    ele.style[key] = key === 'opacity' ? (current + distance) / 100 : current + distance + 'px'
                }
            }, 30)
        }
    }