lovecoding
/
vipAllDay


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background: #00f;
            /* 平滑的过渡效果
                transition:
                    执行效果的元素属性 执行完的时间 执行时的运动状态 延迟时间
                    linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
                    ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
                    ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
                    ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
                    ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
                    cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数
            */
            transition: width 2s linear 0;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button id="btn1">放大</button>
    <button id="btn2">缩小</button>
    <script>
        var box = document.getElementById("box");
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        btn1.onclick = function() {
            console.log("走进来")
               var timer = setInterval(function(){
                box.style.width = box.offsetWidth + 10 + 'px';
                if(box.offsetWidth >= 500) {
                    clearInterval(timer);
                }
            },20)
        }
    </script>
</body>
</html>