原生JS檢測(cè)CSS3動(dòng)畫是否結(jié)束的方法詳解
本文實(shí)例講述了原生JS檢測(cè)CSS3動(dòng)畫是否結(jié)束的方法。分享給大家供大家參考,具體如下:
不知道大家在做網(wǎng)頁(yè)的時(shí)候有沒有碰到這種情況:當(dāng)你使用CSS3的動(dòng)畫屬性時(shí),想要在動(dòng)畫結(jié)束后添加一系列操作,但往往這些操作可能會(huì)發(fā)生在與動(dòng)畫同時(shí)出現(xiàn)或者是在動(dòng)畫還沒結(jié)束時(shí)就發(fā)生了。
針對(duì)這種情況我們會(huì)使用js來(lái)監(jiān)聽動(dòng)畫是否結(jié)束即它的style的transition屬性是否為transitionend;下面我們通過一個(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>通過原生js檢測(cè)CSS3的動(dòng)畫結(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)畫 */ .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">開始運(yùn)動(dòng)</button> </body> <script> // 示例動(dòng)畫主要是改變div的寬度 // 主要是通過檢測(cè)transition的值是否為transitionend function init() { var main = document.getElementById('main'); var play = document.getElementById('play'); var test = document.getElementsByClassName('test')[0]; // 兼容性寫法 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)聽事件 setTransitions && main.addEventListener(setTransitions,function (params) { alert('動(dòng)畫結(jié)束'); // 刪除類名move main.classList.remove('move'); },false) } init(); </script> </html>
效果如下:
可以看到當(dāng)動(dòng)畫結(jié)束時(shí)才彈出彈框可以驗(yàn)證方法的可行性。
最后提一下,這個(gè)方法仍存在一些問題,比如你改變兩個(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)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JS使用數(shù)組實(shí)現(xiàn)的隊(duì)列功能示例
這篇文章主要介紹了JS使用數(shù)組實(shí)現(xiàn)的隊(duì)列功能,結(jié)合實(shí)例形式分析了javascript基于數(shù)組的隊(duì)列定義、元素添加、讀取等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03查找JS對(duì)象中是否包含某個(gè)變量的6種方法總結(jié)
在JavaScript中,我們可以通過多種方法來(lái)判斷一個(gè)數(shù)組中是否包含某個(gè)特定的值,這篇文章主要給大家介紹了關(guān)于如何查找JS對(duì)象中是否包含某個(gè)變量的6種方法,需要的朋友可以參考下2024-08-08javascript高亮效果的二種實(shí)現(xiàn)方法
js高亮效果實(shí)現(xiàn)代碼,直接靜態(tài)頁(yè)面即可,不用每次都要生成2008-09-09弱類型語(yǔ)言javascript中 a,b 的運(yùn)算實(shí)例小結(jié)
這篇文章主要介紹了弱類型語(yǔ)言javascript中 a,b 的運(yùn)算,結(jié)合實(shí)例形式總結(jié)分析了js閉包函數(shù)中布爾值與字符串的a,b運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2019-08-08微信小程序?qū)崿F(xiàn)手風(fēng)琴折疊面板
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手風(fēng)琴折疊面板,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05javascript 冒泡排序 正序和倒序?qū)崿F(xiàn)代碼
javascript 冒泡排序 正序和倒序?qū)崿F(xiàn)代碼,需要的朋友可以參考下。2010-12-12