本文實(shí)例講述了原生JS檢測(cè)CSS3動(dòng)畫(huà)是否結(jié)束的方法。分享給大家供大家參考，具體如下：
不知道大家在做網(wǎng)頁(yè)的時(shí)候有沒(méi)有碰到這種情況：當(dāng)你使用CSS3的動(dòng)畫(huà)屬性時(shí)，想要在動(dòng)畫(huà)結(jié)束后添加一系列操作，但往往這些操作可能會(huì)發(fā)生在與動(dòng)畫(huà)同時(shí)出現(xiàn)或者是在動(dòng)畫(huà)還沒(méi)結(jié)束時(shí)就發(fā)生了。
針對(duì)這種情況我們會(huì)使用js來(lái)監(jiān)聽(tīng)動(dòng)畫(huà)是否結(jié)束即它的style的transition屬性是否為transitionend;下面我們通過(guò)一個(gè)簡(jiǎn)單的例子來(lái)理解一下我這句話的含義：
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>通過(guò)原生js檢測(cè)CSS3的動(dòng)畫(huà)結(jié)束</title>
<style>
*{padding: 0;margin: 0;}
.test{
width: 200px;
height: 200px;
border: 1px soli black;
background: red;
transition-property:width;
transition-duration: 3s;
}
/* 動(dòng)畫(huà) */
.test.move{
width:600px;
}
button{
width: 80px;
height: 25px;
font-size: 16px;
text-align: center;
line-height: 25px;
}
</style>
</head>
<body>
<div class="test" id="main">
</div>
<button id="play">開(kāi)始運(yùn)動(dòng)</button>
</body>
<script>
// 示例動(dòng)畫(huà)主要是改變div的寬度
// 主要是通過(guò)檢測(cè)transition的值是否為transitionend
function init() {
var main = document.getElementById('main');
var play = document.getElementById('play');
var test = document.getElementsByClassName('test')[0];
// 兼容性寫(xiě)法
transitions = {
// 兼容IE
'transition': 'transitionend',
// 兼容Opera
'OTransition': 'oTransitionEnd',
// 兼容Firefox
'MozTransition': 'transitionend',
// 兼容Google
'WebkitTransition': 'webkitTransitionEnd'
};
function getTransitions() {
var t;
for (t in transitions) {
// t即transition，OTransition，MozTransition，WebkitTransition
if (main.style[t] !== undefined) {
return transitions[t];
}
}
}
// 按鈕添加click事件
play.onclick = function () {
main.classList.add('move');
};
// 接收返回的當(dāng)前瀏覽器的transition的值
var setTransitions = getTransitions();
// 添加監(jiān)聽(tīng)事件
setTransitions && main.addEventListener(setTransitions,function (params) {
alert('動(dòng)畫(huà)結(jié)束');
// 刪除類名move
main.classList.remove('move');
},false)
}
init();
</script>
</html>
效果如下：
可以看到當(dāng)動(dòng)畫(huà)結(jié)束時(shí)才彈出彈框可以驗(yàn)證方法的可行性。
最后提一下，這個(gè)方法仍存在一些問(wèn)題，比如你改變兩個(gè)屬性：寬度和高度，可能就會(huì)觸發(fā)這個(gè)方法兩次或者多次，所以使用的時(shí)候要注意一下。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試一下運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 www.polareal.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬(wàn)商天勤律師事務(wù)所王興未律師提供法律服務(wù)
