• 原生JS代码封装(输入属性、属性值、动画时长,获得动画效果)


    function animate(ele, props, callback) { //属性,属性值,动画时长
        
        stopNow();
        
        ele.timerlist = [];
        ele.cbk = callback;
        
        for (let attr in props) {
            let start = parseFloat(getStyle(ele)[attr]);
            let degree = 0;
            let distance = props[attr] - start;
            let t = setInterval(function() {
                degree += 3;
                // console.log(start + Math.sin(Math.PI / 180 * degree) * distance);
                if(attr == "opacity") {
                    ele.style[attr] = start + Math.sin(Math.PI / 180 * degree) * distance;
                } else {
                    ele.style[attr] = start + Math.sin(Math.PI / 180 * degree) * distance + "px";
                }
                if (degree == 90) {
                    clearInterval(t)
                    var index = ele.timerlist.indexOf(t);
                    ele.timerlist.splice(index,1);
                    ele.timerlist.length == 0 ? (ele.cbk ? ele.cbk() : "" ) : "";
                }
            }, 30);
            ele.timerlist.push(t);
        }

        function getStyle(ele) {
            if (window.VBArray) {
                return ele.currentStyle;
            } else {
                return getComputedStyle(ele);
            }
        }
        
        function stopNow(){
            if(!ele.timerlist) return;
            var t = null;
            while(t=ele.timerlist.pop()) {
                clearInterval(t);
            }
        }
    }
  • 相关阅读:
    Ajax原生XHR对象
    node-sass报错解决方法
    AngularJS中的表单验证
    javaScirpt事件详解-原生事件基础(一)
    jQuery Ajax总结
    Ruby 方法
    JS中常遇到的浏览器兼容问题和解决方法
    History对象
    转码与解码
    Location对象
  • 原文地址:https://www.cnblogs.com/sunyang-001/p/10813056.html
Copyright © 2020-2023  润新知