模拟CSS3 多组位移运动属性的框架封装

obj是将要运动的对象，json是运动完成时的位移结果。

封装要点：

　　1.定时器开关flag的定义要放在for in结构的外面，否则，每遍历一次，都会定义一个新的flag

　　2.if(current != json[attr]) { flag = false; }要放到遍历的里面，因为定时器每运行一次，都要判断一下是否到达终点

　　3.if(flag == false) {clearInterval(obj.timer)}放到遍历结构的外面，当所有的位移都达到json给的数值的时候，才关闭定时器。否则，只有一个json[attr]达到位移终点时，定时器就会关闭，此时，可能别的位移还没有到达json数据给的终点。

    function animate(obj,json){ 
		clearInterval(obj.timer);
		var flag = true;
		obj.timer = setInterval(function (){
			for (var attr in json) {
				// var current = parseInt(getCss(obj,attribute))
				// getCss(obj,attr)中的attr是从json中获取到的，因此不能用attribution了
				var current = parseInt(getCss(obj,attr));
				var step = (json[attr] - current) /10;
				step = step >0 ? Math.ceil(step) : Math.floor(step);
				// obj.style[attr] = parseInt(getCss(obj,attr)) + step + 'px' ;
				obj.style[attr] = current + step + 'px' ;
				if(current != json[attr]) {
					flag = false;
				}
			}
		},30);
		if(flag == false) {clearInterval(obj.timer)}
		
	}

　　案例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
             100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
            opacity: 0.3;
        }
    </style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>
<script>
    var btn200 = document.getElementById("btn200");
    var btn400 = document.getElementById("btn400");
    var box = document.getElementById("box");
    btn200.onclick = function() {
        animate(box,{top: 300,height:200,width : 600});
    }
    btn400.onclick = function() {
        animate(box,{top: 100,height:500,width : 300});
    }

    function animate(obj,json){ 
		clearInterval(obj.timer);
		var flag = true;
		obj.timer = setInterval(function (){
			for (var attr in json) {
				// var current = parseInt(getCss(obj,attribute))
				// getCss(obj,attr)中的attr是从json中获取到的，因此不能用attribution了
				var current = parseInt(getCss(obj,attr));
				var step = (json[attr] - current) /10;
				step = step >0 ? Math.ceil(step) : Math.floor(step);
				// obj.style[attr] = parseInt(getCss(obj,attr)) + step + 'px' ;
				obj.style[attr] = current + step + 'px' ;
				if(current != json[attr]) {
					flag = false;
				}
			}
		},30);
		if(flag == false) {clearInterval(obj.timer)}
		
	}
	function getCss(obj,attribute) {
		if(obj.currentStyle) {
			return obj.currentStyle[attribute];}else {
		return window.getComputedStyle(obj,null)[attribute];}
	}
</script>