Estoy trabajando en la escritura de un carrusel de imágenes en Vue (siguiendo el tutorial de Luis Velásquez) y me encuentro con un problema extraño en el que nunca se activa una devolución de llamada que se llama, y no estoy seguro de por qué.

Cuando se hace clic en el botón "siguiente" en mi carrusel, llama al next método, a continuación:

 next () { if (this.transitioning) { return; } this.transitioning = true; this.moveLeft(); const self = this; this.afterTransition(() => { const first = self.slides.shift(); self.slides.push(first); self.resetTranslate(); this.transitioning = false; }); },

La devolución de llamada afterTransition es:

 afterTransition (callback) { const listener = () => { callback(); this.$refs.inner.removeEventListener('transitionend', listener); }; this.$refs.inner.addEventListener('transitionend', listener); },

Sin embargo, el bloque dentro de afterTransition nunca se llama; this.transitioning nunca se restablece a falso, por lo que después de hacer clic en siguiente por primera vez, el resto de ese método nunca se vuelve a activar.

¿Alguien puede arrojar algo de luz sobre lo que está pasando aquí? ¡Gracias!