js做过渡效果是怎么样做的？

小白对js不太熟悉，那么请问，我如果js来做点击按钮，然后div经过5s移动到右边500px的地方，这种效果的制作思路是啥？

是先写好一个class，让这些效果完全都达到了，然后用js来切换className么？

但是在点击事件里面，把所有的css效果写进去？ QUQ

javascript

阅读 8.8k

6 个回答

✓ 已被采纳

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    transition:all 5s;
}

div:hover
{
    width:300px;
}
    #div1{
        position:relative;
        width:100px;
        height:100px;
    }
    #div2{
        position:absolute;
        width:100%;
        height:100%;
        background:#0f0;
    }
    #div2.div2{
        width:200%;
        height:200%;
    }
</style>
</head>
<body>
<input type='button' id='btn1'/>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

<div></div>
    <div id='div1'>
        <div id='div2'></div>
    </div>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>

</body>
    <script>
        window.onload=function(){
            var oBtn=document.getElementById("btn1"),oDiv=document.getElementById("div2");
            oBtn.onclick=function(){
                oDiv.className='div2';
            }
        }
        </script>
</html>

给你个简单的demo看完就会了，这也只是方法中的一种，方法还有很多！

Dont

7k163552

发布于
2017-06-21

你要的是这样么？代码见下方， div 5s移动到500px，可以先给div设置好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;
}

<div class="demo">
      
</div>

(function(){
    document.getElementsByClassName('demo')[0].onclick = function(){
        this.className +=' run';
    };
})()

kongcheng

36911423

发布于
2017-06-21

可以用css，也可以直接用js写。css的话就用transition写，具体的百度，点击事件发生时为元素添加一个class，改变样式。js的话就用settimeout，以你说的左边距为例，一点一点改变左边距，到达指定值时停止即cleartimeout

MikeBison

2212

发布于
2017-06-21

如楼上所说,如果是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)
}