javascript - js做過(guò)渡效果是怎么樣做的？
問(wèn)題描述
小白對(duì)js不太熟悉，那么請(qǐng)問(wèn)，我如果js來(lái)做點(diǎn)擊按鈕，然后p經(jīng)過(guò)5s移動(dòng)到右邊500px的地方，這種效果的制作思路是啥？
是先寫(xiě)好一個(gè)class，讓這些效果完全都達(dá)到了，然后用js來(lái)切換className么？
但是在點(diǎn)擊事件里面，把所有的css效果寫(xiě)進(jìn)去？ QUQ
問(wèn)題解答
回答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>該實(shí)例無(wú)法在 Internet Explorer 9 及更早 IE 版本上工作。</p><p></p> <p id=’p1’><p id=’p2’></p> </p><p>鼠標(biāo)移動(dòng)到 p 元素上，查看過(guò)渡效果。</p></body> <script>window.onload=function(){ var oBtn=document.getElementById('btn1'),op=document.getElementById('p2'); oBtn.onclick=function(){op.className=’p2’; }}</script></html>
給你個(gè)簡(jiǎn)單的demo看完就會(huì)了，這也只是方法中的一種，方法還有很多！
回答2：你要的是這樣么？代碼見(jiàn)下方， p 5s移動(dòng)到500px，可以先給p設(shè)置好transition效果，加個(gè)移動(dòng)到右邊的class, js主要做的就是給元素加個(gè)class
ps: 只是demo代碼，沒(méi)考慮兼容等等情況……
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寫(xiě)。css的話就用transition寫(xiě)，具體的百度，點(diǎn)擊事件發(fā)生時(shí)為元素添加一個(gè)class，改變樣式。js的話就用settimeout，以你說(shuō)的左邊距為例，一點(diǎn)一點(diǎn)改變左邊距，到達(dá)指定值時(shí)停止即cleartimeout
回答4：如樓上所說(shuō),如果是ie9以下,需要使用定時(shí)器做
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實(shí)現(xiàn)過(guò)渡效果，要?jiǎng)赢?huà)的話用animation，使用js比較耗性能，這里有一些參考文章
回答6：css3d屬性
相關(guān)文章：
1. 數(shù)據(jù)庫(kù) - Mysql的存儲(chǔ)過(guò)程真的是個(gè)坑！求助下面的存儲(chǔ)過(guò)程哪里錯(cuò)啦，實(shí)在是找不到哪里的問(wèn)題了。2. ios - 類似微博首頁(yè)，一張圖的時(shí)候是如何確定圖大小的？3. python - Django有哪些成功項(xiàng)目？4. MySQL主鍵沖突時(shí)的更新操作和替換操作在功能上有什么差別(如圖)5. Python中使用超長(zhǎng)的List導(dǎo)致內(nèi)存占用過(guò)大6. node.js - 微信小程序websocket連接問(wèn)題7. javascript - vue過(guò)渡效果 css過(guò)渡 類名的先后順序8. javascript - 我是做web前端的，公司最近有一個(gè)項(xiàng)目關(guān)于數(shù)據(jù)統(tǒng)計(jì)的！9. javascript - 如何使用loadash對(duì)[object,object,object]形式的數(shù)組進(jìn)行比較10. javascript - vuejs+elementui 購(gòu)物車(chē)價(jià)格計(jì)算，點(diǎn)擊加減號(hào)修改數(shù)量總價(jià)都不會(huì)改變，但是計(jì)算執(zhí)行了
網(wǎng)公網(wǎng)安備