javascript - How to create transition effect in js?

Question

I'm not very familiar with js, so I would like to ask, if I use js to click a button, and then the div moves to 500px on the right after 5 seconds, what is the idea for creating this effect? Should I write a class first to achieve all these effects, and then use js to switch the className? But on click event...

PHP中文网 · Answer




 





注意：该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。


    
        

    
鼠标移动到 p 元素上，查看过渡效果。

I’ll give you a simple demo and you’ll know it. This is just one of the methods, there are many more!

伊谢尔伦 · Answer

Is this what you want? See the code below. p moves to 500px in 5s. You can set the transition effect for p first and add a class that moves to the right. What js mainly does is to add a class to the element

ps: It’s just a demo code, not considering compatibility, etc...

css3

.demo{
    border:1px solid #fff;
    width:100px;
    height:50px;
    position:relative;
    left:0;
    transition: left 2s;
}
.run{

    left:500px;
}

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

女神的闺蜜爱上我 · Answer

You can use css or write directly in js. For css, use transition to write it. For Baidu specifically, when a click event occurs, add a class to the element and change the style. For js, use settimeout, take the left margin you mentioned as an example, change the left margin bit by bit, and stop when it reaches the specified value, which is cleartimeout

代言 · Answer

As mentioned above, if it is ie9 or below, you need to use a timer

var ele = document.getElementsByClassName('demo')[0]
ele.onclick = function(){
    var btn = this;
    setInterval(function(){
        btn.style.left = parseInt(btn.style.left) + 1 + "px"
    },1)
}

習慣沉默 · Answer

Usually css3’s transition is used to achieve the transition effect. If you want animation, use animation. Using js is more performance-intensive. Here are some reference articles

typecho · Answer

css3d properties