原生JS檢測CSS3動畫是否結(jié)束的方法詳解

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 22:01:31

原生JS檢測CSS3動畫是否結(jié)束的方法詳解

原生JS檢測CSS3動畫是否結(jié)束的方法詳解:本文實例講述了原生JS檢測CSS3動畫是否結(jié)束的方法。分享給大家供大家參考，具體如下：不知道大家在做網(wǎng)頁的時候有沒有碰到這種情況：當你使用CSS3的動畫屬性時，想要在動畫結(jié)束后添加一系列操作，但往往這些操作可能會發(fā)生在與動畫同時出現(xiàn)或者是在動畫還沒

推薦度：

點擊下載本文 文檔為doc格式

導讀原生JS檢測CSS3動畫是否結(jié)束的方法詳解:本文實例講述了原生JS檢測CSS3動畫是否結(jié)束的方法。分享給大家供大家參考，具體如下：不知道大家在做網(wǎng)頁的時候有沒有碰到這種情況：當你使用CSS3的動畫屬性時，想要在動畫結(jié)束后添加一系列操作，但往往這些操作可能會發(fā)生在與動畫同時出現(xiàn)或者是在動畫還沒

本文實例講述了原生JS檢測CSS3動畫是否結(jié)束的方法。分享給大家供大家參考，具體如下：

不知道大家在做網(wǎng)頁的時候有沒有碰到這種情況：當你使用CSS3的動畫屬性時，想要在動畫結(jié)束后添加一系列操作，但往往這些操作可能會發(fā)生在與動畫同時出現(xiàn)或者是在動畫還沒結(jié)束時就發(fā)生了。

針對這種情況我們會使用js來監(jiān)聽動畫是否結(jié)束即它的style的transition屬性是否為transitionend;下面我們通過一個簡單的例子來理解一下我這句話的含義：

代碼如下：

<!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檢測CSS3的動畫結(jié)束</title>
 <style>
 *{padding: 0;margin: 0;}
 .test{
 width: 200px;
 height: 200px;
 border: 1px soli black;
 background: red;
 transition-property:width;
 transition-duration: 3s;
 }
 /* 動畫 */
 .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">開始運動</button>
</body>
<script>
 // 示例動畫主要是改變div的寬度
 // 主要是通過檢測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');
 };
 // 接收返回的當前瀏覽器的transition的值
 var setTransitions = getTransitions();
 // 添加監(jiān)聽事件
 setTransitions && main.addEventListener(setTransitions,function (params) {
 alert('動畫結(jié)束');
 // 刪除類名move
 main.classList.remove('move');
 },false)
 }
 init();
</script>
</html>

效果如下：

可以看到當動畫結(jié)束時才彈出彈框可以驗證方法的可行性。

最后提一下，這個方法仍存在一些問題，比如你改變兩個屬性：寬度和高度，可能就會觸發(fā)這個方法兩次或者多次，所以使用的時候要注意一下。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試一下運行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

原生JS檢測CSS3動畫是否結(jié)束的方法詳解

推薦度：

點擊下載本文 文檔為doc格式

標簽：結(jié)束 js css3

熱門焦點

原生JS檢測CSS3動畫是否結(jié)束的方法詳解

原生JS檢測CSS3動畫是否結(jié)束的方法詳解

原生JS檢測CSS3動畫是否結(jié)束的方法詳解

最新推薦

猜你喜歡

熱門推薦