<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width:100px;
height:100px;
background-color: gainsboro;
position:relative;
top:200px;
opacity:0.8
}
</style>
<script>
window.onload=function(){
var div=document.querySelector('div')
div.addEventListener('click',function(){
animation(this,{'left':233,'top':559,opacity:0.2},end);
function end(){
this.style.backgroundColor='blue';
}
})
function animation(elem,obj,fn=()=>{}){
fn=fn.bind(elem)
let count=0;
for(let attr in obj){
if(attr === 'opacity') obj[attr]*=100
count++
let timer=setInterval(function(){
let current= attr==='opacity' ? getComputedStyle(elem)[attr]*100 : parseInt(getComputedStyle(elem)[attr])
let step=(obj[attr]-current)/10
step=step>0 ? Math.ceil(step) : Math.floor(step)
if(current === obj[attr]){
clearInterval(timer)
count--
if(!count){
fn()
}
}else{
elem.style[attr]=attr==='opacity' ? (current+step)/100 : current+step+'px'
}
},30)
}
}
}
</script>
</head>
<body>
<div></div>
<span></span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
div{
width:100px;
height:100px;
background-color: fuchsia;
position:absolute;
left:500px;
top:600px;
/* display:none; */
}
span{
width:100px;
height:100px;
background-color: rgb(236, 9, 9);
display:block;
position:absolute;
left:0;
top:140px;
}
</style>
</head>
<body>
<div></div>
<!-- <span></span> -->
<script>
var div=document.querySelector('div')
// var span=document.getElementsByTagName('span')[0]
function move(elem,attr,target){
let step=0;
let timer=setInterval(function(){
step+=20;
elem.style[attr]=step+'px';
if(step>=target) clearTimeout(timer);
},30)
}
div.addEventListener('mousedown',function(){
animation(div,{opacity:0.2,left:200,top:111})
// animation(div,{opacity:0.2})
})
function animation(elem,obj){
for(let key in obj){
console.log(key);
let step=parseInt(getComputedStyle(elem)[key]);
let increment=(obj[key]-step)/10;
if(key === 'opacity'){
let timer=setInterval(function(){
console.log(step,increment)
step+=increment;
elem.style[key]=step;
if(Math.abs(step-obj[key])<0.001) clearInterval(timer);
})
}else{
let timer=setInterval(function(){
// step+=50;
step+=increment;
elem.style[key]=step+'px';
if(Math.abs(step-obj[key])<2) clearTimeout(timer);
},30)
}
}
}
</script>
</body>
</html>