本文主要和大家分享原生js分段动画的实现代码，希望能帮助到大家。
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>函数的封装(多属性),动画的停止-分段动画</title>
<style type="text/css">
* { margin: 0; padding: 0; }
.box { width: 100px; height: 100px; background-color: #f10250; margin: 50px; position: relative; }
</style>
<script type="text/javascript">
function getstyle(element, stylename) {
if (element.currentstyle) { return element.currentstyle[stylename];
} else { return window.getcomputedstyle(element, null)[stylename];
}
} function animate(element, json, fun) {
//element.timer的意思是给当前元素添加一个timer属性
//在这里是添加一个计时器
clearinterval(element.timer); var isstop = false;
element.timer = setinterval(function() {
for (var key in json) {
isstop = true; //通过in循环,获取到的是json中的css属性名key
//通过json[key],可以获取key属性的值
var target = json[key]; var current = parseint(getstyle(element, key)); var setp = (target - current) / 10; //当current的值是一个大于target的值的时候
//此时setp是一个小于零的数,此时向上取整为零
//所以需要判断setp是否大于零,大于零向上取整,小于零向下取整
setp = setp > 0 ? math.ceil(setp) : math.floor(setp);
current += setp;
console.log(current); //只要有一个属性动画没有结束,就不停止动画
//不能用只要有一个属性动画完成就停止动画的思路,
//因为此时不是所有属性的动画都已经完成
//不停止动画
if (math.abs(target - current) > math.abs(setp)) {
isstop = false;
} else { //强制将current = target
current = target;
}
element.style[key] = current + "px"; //停止动画
if (isstop) {
clearinterval(element.timer); //添加回调函数
//判断传入的是一个函数
if (typeof fun == "function") {
fun();
}
}
}
}, 10);
}
window.onload = function() {
var box = document.getelementsbyclassname("box")[0];
box.onclick = function() {
animate(box, {
left: 400,
}, function() {
animate(box, {
width: 500
}, function() {
animate(box, {
height: 500
}, null);
});
});
}
} </script></head><body>
<p class="box"></p>
<p class="hezi" style="background-color: green"></p></body></html
以上就是原生js分段动画的实现代码的详细内容。