缓存动画2

<script>
    myTool.$('btn1').onclick = function () {
        // myTool.$('box').style.background = 'green';
        myTool.changeCssStyle(myTool.$('box'), 'background', 'green');
    };

    myTool.$('btn2').onclick = function () {
        // myTool.$('box').style.width = '1000px';
        myTool.changeCssStyle(myTool.$('box'), 'width', '1000px')
    };

    changeCssStyle (eleObj, attr, value) {
            eleObj.style[attr] = value;
        }
</script>

console.log(myTool.getStyleAttr(box, 'width'));
console.log(myTool.getStyleAttr(box, 'height'));
console.log(myTool.getStyleAttr(box, 'border'));
console.log(myTool.getStyleAttr(box, 'backgroundColor'));

不需要是行内

  getStyleAttr(obj, attr) {
            if (obj.currentStyle) { // IE 和 opera
                return obj.currentStyle[attr];
            } else {
                return window.getComputedStyle(obj, null)[attr];
            }
 }

<script>
    window.addEventListener('load', function (ev) {
        var box = myTool.$('box');

        myTool.$('btn').addEventListener('click', function () {
            buffer(box, 'left', 800);
        });

        myTool.$('btn1').addEventListener('click', function () {
            buffer(box, 'width', 800);
        });
    });

    /**
     *  缓动动画函数
     * @param {Object}eleObj
     * @param {String}attr
     * @param {String | Number}target
     */
    function buffer(eleObj, attr, target) {
        // 1.1 先清后设
        clearInterval(eleObj.timer);

        // 1.2 定义变量
        var speed = 0, begin;

        // 1.2 设置定时器
        eleObj.timer = setInterval(function () {
            // 获取要做动画属性的初始值  parseInt字符串转数字
            begin = parseInt(myTool.getStyleAttr(eleObj, attr));
            console.log('begin:' + begin);


            // 2.3 求出步长
            speed = (target - begin) * 0.2;
            speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);

            // 2.4  动起来
            eleObj.style[attr] = begin + speed + 'px';
            eleObj.innerText = begin;

            // 2.5 清除定时器
            if (begin === target) {
                clearInterval(eleObj.timer);
            }
        }, 20);
    }
</script>