原生JS檢測(cè)CSS3動(dòng)畫(huà)是否結(jié)束的方法詳解

2019-11-19 12:13:21

字體：大中小

供稿：網(wǎng)友

本文實(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>

效果如下：