檢測元素是否應用了CSS動畫的最佳方法是什么？

Question

我正在嘗試在CSS動畫完成時在Web組件上觸發事件，但是用戶可能會使用動畫從元素中清除animation: none; 意味着transitionend事件永遠不會觸發：

// wait for dialog close animation to end before firing closed event
element.addEventListener('transitionend', function() {

    // fire dialog closed event
    self.dispatchEvent(new CustomEvent('pure-dialog-closed', { 
        bubbles: true, 
        cancelable: true 
    }));
});

為了確保我的自定義事件始終觸發，我需要確定元素或其任何子元素是否已應用動畫，如果不是，則立即觸發pure-dialog-closed事件。

我已經嘗試檢查style.animationName和self.style.transition但它似乎沒有工作。 我需要一種簡單的方法來檢查元素或其任何子元素是否應用了CSS動畫。

Answer 1

您可以使用getComputedStyle函數。 以下是讀取div的transition屬性的示例。

在這里閱讀更多相關信息。
https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

 function getTheStyle() { var elem = document.getElementById("elem-container"); var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("transition"); document.getElementById("output").innerHTML = theCSSprop; } getTheStyle(); 

 #elem-container { position: absolute; left: 100px; top: 200px; height: 100px; transition: all 1s; } 

 <div id="elem-container"></div> <div id="output"></div> 

Answer 2

謝謝@Thusitha。 我使用了window.getComputedStyle以及animation-duration和transition-duration來確定動畫是否存在，因為動畫/轉換要播放時需要大於0。

以下檢查所有元素，包括傳入的元素：

 /** * Determine if an element of any or its children have a CSS animation applied * @param {HTMLElement} el - element to inspect * @returns {boolean} true if an animation/transition detected, otherwise false */ function hasCssAnimation(el) { // get a collection of all children including self var items = [el].concat(Array.prototype.slice.call(el.getElementsByTagName("*"))); // go through each item in reverse (faster) for (var i = items.length; i--;) { // get the applied styles var style = window.getComputedStyle(items[i], null); // read the animation/transition duration - defaults to 0 var animDuration = parseFloat(style.getPropertyValue('animation-duration') || '0'); var transDuration = parseFloat(style.getPropertyValue('transition-duration') || '0'); // if we have any duration greater than 0, an animation exists if (animDuration > 0 || transDuration > 0) { return true; } } return false; } var elementToTest = document.querySelector('.one'); var result = hasCssAnimation(elementToTest); alert(result); 

 div { font-size: 14px; padding: 20px; color: #fff; } .one { background: red; } .two { background: green; animation: zoomIn 3s ease; /* <-- animation applied to child */ } .three { background: blue; } @keyframes zoomIn { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } 

 <div class="one"> <div class="two"> <!-- animation on child element --> <div class="three"> Hello World </div> </div> </div> 

Answer 3

您可以偵聽animationend和animationstart事件。

 let element = document.getElementById("square"); element.addEventListener("animationstart", function(event) { element.innerHTML = "RED!" element.setAttribute('data-animating', true); }, false); element.addEventListener("animationend", function(event) { element.innerHTML = "YELLOW!" element.setAttribute('data-animating', false); }, false); setInterval(() => { console.log(element.getAttribute('data-animating')) }, 500) 

 #square{ width: 100px; height: 100px; animation-name: anim; animation-duration: 4s; background-color: red; animation-fill-mode: forwards; text-align: center; vertical-align: middle; line-height: 100px; } @keyframes anim { to {background-color: yellow;} } 

 <div id="square"></div>