javascript - js做過渡效果是怎麼樣做的？
小白對js不太熟悉，那麼請問，我如果js來做點擊按鈕，然後p經過5s移動到右邊500px的地方，這種效果的製作思路是啥？
是先寫好一個class，讓這些效果完全都達到了，然後用js來切換className麼？
但是在點擊事件裡面，把所有的css效果寫進去？ QUQ
小白對js不太熟悉，那麼請問，我如果js來做點擊按鈕，然後p經過5s移動到右邊500px的地方，這種效果的製作思路是啥？
是先寫好一個class，讓這些效果完全都達到了，然後用js來切換className麼？
但是在點擊事件裡面，把所有的css效果寫進去？ QUQ
PHP中文网2017-06-26 10:56:58
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p
{
width:100px;
height:100px;
background:red;
transition:all 5s;
}
p:hover
{
width:300px;
}
#p1{
position:relative;
width:100px;
height:100px;
}
#p2{
position:absolute;
width:100%;
height:100%;
background:#0f0;
}
#p2.p2{
width:200%;
height:200%;
}
</style>
</head>
<body>
<input type='button' id='btn1'/>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<p></p>
<p id='p1'>
<p id='p2'></p>
</p>
<p>鼠标移动到 p 元素上，查看过渡效果。</p>
</body>
<script>
window.onload=function(){
var oBtn=document.getElementById("btn1"),op=document.getElementById("p2");
oBtn.onclick=function(){
op.className='p2';
}
}
</script>
</html>
給你個簡單的demo看完就會了，這也只是方法中的一種，方法還有很多！
伊谢尔伦2017-06-26 10:56:58
你要的是這樣麼？程式碼見下方， p 5s移動到500px，可以先給p設定好transition效果，加個移動到右邊的class, js主要做的就是給元素加個class
ps: 只是demo程式碼，沒考慮相容等等情況…
css3
.demo{
border:1px solid #fff;
width:100px;
height:50px;
position:relative;
left:0;
transition: left 2s;
}
.run{
left:500px;
}<p class="demo">
</p>(function(){
document.getElementsByClassName('demo')[0].onclick = function(){
this.className +=' run';
};
})()
女神的闺蜜爱上我2017-06-26 10:56:58
可以用css，也可以直接用js寫。 css的話就用transition寫，具體的百度，點選事件發生時為元素加入一個class，改變樣式。 js的話就用settimeout，以你說的左邊距為例，一點一點改變左邊距，到達指定值時停止即cleartimeout
代言2017-06-26 10:56:58
如樓上所說,如果是ie9以下,需要使用定時器做
var ele = document.getElementsByClassName('demo')[0]
ele.onclick = function(){
var btn = this;
setInterval(function(){
btn.style.left = parseInt(btn.style.left) + 1 + "px"
},1)
}