エレメントにCSSアニメーションが適用されているかどうかを検出する最も良い方法は何ですか

Question

CSSアニメーションが完了したときにweb componentでイベントを発生させようとしていますが、ユーザがエレメントからアニメーションをクリアする可能性があります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

あなた@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 2

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 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>