原生JS实现宽度过渡动画-优快云博客

本文链接：https://blog.youkuaiyun.com/Alice9969/article/details/81774910

思路：

1.原生js使用setInterval 每N秒钟改变属性值；

2.原生js使用setInterval 每N秒钟改变属性值，结合css transition 属性，实现效果，效果较好；

HTML：

JS :

function 1:

let befor = 0 ;
let set= 300 ;

let result = setInterval( ()=>{
befor += 100
//小于等于设置值，就停止动画
if( befor <= set)
{
clearInterval(result);
}
document.getElementById('test').style.width = befor + "px";

},200);
</script>

Function2：

css:

transition:width 2s linear;

-webkit-transition:width 2s linear; /* Safari */

let result = setInterval( ()=>{
befor = after
if( befor >= after )
{
clearInterval(result);
}
document.getElementById('test').style.width = befor + "px";
},200);

</script>

全部代码，复制粘贴即可：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义动画</title>
<style>
div
{
width:0px;
height:100px;
background:red;
transition:width 2s linear;
-webkit-transition:width 2s linear; /* Safari */
}

/*div:hover
{
width:300px;
}*/
</style>
</head>
<body>

<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

<p>鼠标移动到 div 元素上，查看过渡效果。</p>
<script>

let befor = 0 ;
let after = 300 ;

let result = setInterval( ()=>{
befor = after
if( befor >= after )
{
clearInterval(result);
}
document.getElementById('test').style.width = befor + "px";
},200);

</script>
</body>
</html>