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)
}