結果を実現
均一なアニメーションを達成するためのオフセットセクションで、アニメーションを緩和するが、そう解決するために、あなただけの属性を設定することができ、そしてアニメーションが注文執行を持つことはできません。
- スタイル情報を含む関数の配列に渡され、すべてが同時にアニメーションを実行する属性
- 複数のアニメーションを順次実行する場合、後者のステートメントは、実装に続く、前の文に渡されます
- あなたが必要な場合は、元の文に渡される遅延は、タイマーを追加することができます
コード
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<style>
*{
margin:0;
padding:0;
font-family:"微软雅黑";
}
#box{
width:50px;
height:50px;
color:#fff;
text-align:center;
font-size:14px;
line-height:50px;
position:relative;
background:#08f;
top:50px;
left:10px;
border-radius:100%;
}
</style>
</head>
<body>
<div id="box">box</div>
<script>
var box=document.getElementById("box");
box.onclick=function(){
var t=this; //this赋给t方便操作
var json={ //动画1
"top":25,
"left":100,
"width":100,
"height":100,
"line-height":100,
"font-size":30
};
var json2={ //动画2
"top":50,
"left":190,
"width":50,
"height":50,
"line-height":50,
"font-size":14
};
animate(t,json,function(){
setTimeout(function(){ //延时1s
animate(t,json2);
},1000);
});
};
function animate(ele,json,fn){
clearInterval(ele.timer);
ele.timer=setInterval(function(){
var flag=true;
for(var key in json){
var current=parseInt(getStyle(ele,key)) || 0; //获取源值，若无则赋0
var dir=current<json[key] ? 1 : -1; //确定方向
ele.style[key]=current+dir*Math.ceil(Math.abs(current-json[key])/10)+"px";
if(json[key]!=current){ //所有参数都到位再停止
flag=false;
}
}
if(flag){
clearInterval(ele.timer);
if(fn){
fn();
}
}
},24);
}
function getStyle(ele, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(ele, null)[attr];
}
return ele.currentStyle[attr];
}
</script>
</body>
</html>このコードは、達成することができないなど、複雑なスタイル左、幅、等小数点アニメーションのクラススタイル、不透明度などのフォントサイズの整数値を達成することができないスタイル、色、背景を達成することができるが、特定のスタイルのために解決することができます