javascript - js做过渡效果是怎么样做的？
问题描述
小白对js不太熟悉，那么请问，我如果js来做点击按钮，然后p经过5s移动到右边500px的地方，这种效果的制作思路是啥？
是先写好一个class，让这些效果完全都达到了，然后用js来切换className么？
但是在点击事件里面，把所有的css效果写进去？ QUQ
问题解答
回答1：<!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看完就会了，这也只是方法中的一种，方法还有很多！
回答2：你要的是这样么？代码见下方， 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’; };})()回答3：
可以用css，也可以直接用js写。css的话就用transition写，具体的百度，点击事件发生时为元素添加一个class，改变样式。js的话就用settimeout，以你说的左边距为例，一点一点改变左边距，到达指定值时停止即cleartimeout
回答4：如楼上所说,如果是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)}回答5：
一般都是用css3的transition实现过渡效果，要动画的话用animation，使用js比较耗性能，这里有一些参考文章
回答6：css3d属性
相关文章：
1. Python处理Dict生成json2. （python)关于如何做到按win+R再输入文件文件名就可以运行？3. python - 如何使用websocket在网页上动态示实时数据的折线图？4. mysql - Sql union 操作5. java - Mybatis 数据库多表关联分页的问题6. 急急急！！！求大神解答网站评论问题，有大神帮帮小弟吗7. javascript - 按钮链接到另一个网址 怎么通过百度统计计算按钮的点击数量8. python - UTC格式转换成本地时间9. python - 请问这两个地方是为什么呢？10. python2.7 - python 正则前瞻 后瞻 无法匹配到正确的内容
网公网安备