Considere esta función
async function Animate(element) { // do something with dom element's animation, triggering it element.addEventListener("animationend", function(event) { // this is when Animate(element) should resolve/return } }¿Hay alguna forma de lidiar con este escenario y realmente tener una función asincrónica que se resuelva/retorne en una devolución de llamada del detector de eventos?
Usa una promesa. En el detector de eventos animationend, resuélvalo.
const animateThis = async(elem) => { return new Promise(resolve => { elem.classList.add("active"); elem.addEventListener('animationend', () => { elem.classList.remove("active"); resolve(); }); }); }; (async function() { const elem = document.querySelector(".animation"); console.log("before call"); await animateThis(elem); console.log("after call"); }()); .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } <p class="animation">Hello World</p>Podría devolver o esperar una nueva Promesa dentro de su función asíncrona y llamar a su resolución en el controlador de eventos, pero lo que ocurre con la mayoría de los eventos (y el fin de animación es parte de ellos) es que es posible que nunca se activen, por lo que podría estar esperando algo que nunca sucederá.
En este caso particular de un fin de animación, puede resolver este problema gracias a la API de animaciones web que expone una promesa finished que se resolverá o rechazará si la animación se detuvo antes de su finalización prevista:
const elem = document.querySelector(".animate"); (async () => { // never gonna resolve const prom = new Promise((resolve) => { elem.addEventListener("animationend", () => resolve(), { once: true }); }); // await prom; prom.then(()=>console.log("event fired")); // using the Web Animation API // we should do more filtering on the Animations here // to be sure we get our own const anim = elem.getAnimations()[0]; try { await anim.finished; } catch(err) { } console.log("anim ended"); })().catch(console.error); // stop the animation before completion setTimeout(() => elem.remove(), 2000); .animate { width: 50px; height: 50px; background: green; animation: anim 10s linear; } @keyframes anim { to { transform: translate(120px,0); } } <div class="animate"></div>