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

Question

小白对js不太熟悉，那么请问，我如果js来做点击按钮，然后div经过5s移动到右边500px的地方，这种效果的制作思路是啥？ 是先写好一个class，让这些效果完全都达到了，然后用js来切换className么？ 但是在点击事件...

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属性

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程