javascript - Wie erstelle ich Übergangseffekte mit js?

Question

Ich bin mit js nicht sehr vertraut, also möchte ich Sie fragen: Wenn ich js verwende, um auf eine Schaltfläche zu klicken, und das Div dann nach 5 Sekunden auf 500 Pixel auf der rechten Seite wechselt, was ist die Idee, diesen Effekt zu erzeugen? Sollte ich zuerst eine Klasse schreiben, um alle diese Effekte zu erzielen, und dann mit js den Klassennamen ändern? Aber beim Click-Event...

PHP中文网 · Answer




 





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


    
        

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

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

伊谢尔伦 · Answer

你要的是这样么？代码见下方， 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;
}

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

女神的闺蜜爱上我 · Answer

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

代言 · Answer

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

習慣沉默 · Answer

一般都是用css3的transition实现过渡效果，要动画的话用animation，使用js比较耗性能，这里有一些参考文章

typecho · Answer

css3d属性