想问下老师，js中如何平滑过渡效果改变呢？
7202019-04-15 15:02:51236<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{width:200px;height:50px;background:#65bef9; margin: 0px auto;}
p{text-align: center;}
input{width: 70px; height: 30px; border:none; background: #ddd; color: #666;}
input:hover{background: #ccc; }
</style>
</head>
<body>
<div id="box"></div>
<p>
<input type="button" value="宽度" onclick="boxWidth()">
<input type="button" value="高度" onclick="boxHeight()">
<input type="button" value="颜色" onclick="boxBgcolor()">
<input type="button" value="重置" onclick="boxReset()">
<input type="button" value="隐藏" onclick="boxHide()">
<input type="button" value="显示" onclick="boxShow()">
</p>
<p>想问下老师，js中如何平滑过渡效果改变呢？</p>
<script type="text/javascript">
var box;
window.onload=function (){
box = document.getElementById("box");
}
function boxWidth(){
box.style.width="500px";
}
function boxHeight(){
box.style.height="500px";
}
function boxBgcolor(){
box.style.background="#ffa200";
}
function boxReset(){
box.style.width="200px";
box.style.height="50px";
box.style.background="#65bef9";
}
function boxHide(){
box.style.display="none";
}
function boxShow(){
box.style.display="block";
}
</script>
</body>
</html>