Quelle est la meilleure façon de détecter si un élément a une animation CSS appliquée

Question

Je tente de déclencher un événement sur une web component lorsqu'une animation CSS est terminée, mais il est possible que l'utilisateur efface l'animation de l'élément en utilisant animation: none; signifie l'événement transitionend jamais feux:

// 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 
    })); 
}); 

pour assurer mon événement personnalisé toujours des incendies, je dois déterminer si l'élément ou l'un de ses enfants ont une animation appliquée et si non, déclencher l'événement pure-dialog-closed immédiatement.

J'ai tried en vérifiant style.animationName et self.style.transition mais cela ne semble pas fonctionner. J'ai besoin d'un moyen simple de vérifier si un élément, ou l'un de ses enfants, a une animation CSS appliquée.

Answer 1

Merci @Thusitha. J'ai utilisé window.getComputedStyle avec animation-duration et transition-duration pour déterminer si une animation existait car l'une d'entre elles aurait besoin d'être supérieure à 0 pour une animation/transition à jouer.

Ci-dessous inspecte tous les éléments, y compris l'élément de décès:

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

Vous pouvez utiliser la fonction getComputedStyle. Voici un exemple qui a lu la propriété transition d'un div.

En savoir plus à ce sujet ici.
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

Vous pouvez écouter animationend et animationstart événements.

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>