|
|
@@ -0,0 +1,45 @@
|
|
|
+<!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>
|
e