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. 前端 - node vue webpack項目文件結構2. 如何分別在Windows下用Winform項模板+C#，在MacOSX下用Cocos Application項目模板+Objective-C實現一個制作游戲的空的黑窗口？3. html5和Flash對抗是什么情況？4. php如何獲取訪問者路由器的mac地址5. javascript - 在 vue里面用import引入js文件，結果為undefined6. Java反射問題：為什么android.os.Message的recycleUnchecked方法不能通過反射獲取到？7. 小程序怎么加外鏈，語句怎么寫！求救新手，開文檔沒發現8. python - linux怎么在每天的凌晨2點執行一次這個log.py文件9. javascript - vue-resource中如何設置全局的timeout？10. thinkPHP5中獲取數據庫數據后默認選中下拉框的值，傳遞到后臺消失不見。有圖有代碼，希望有人幫忙
網公網安備