I am working on writing an image carousel in Vue, (following Luis Velasquez's tutorial) and am running into a strange issue where a callback that is called never actually fires, and I'm not sure why.

When the "next" button in my carousel is clicked, it calls the next method, below:

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

The afterTransition callback is:

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

However, the block inside afterTransition is never called -- this.transitioning is never reset to false, so after clicking next a first time, the rest of that method never fires again.

Is anyone able to shed some light on what is going on here? Thank you!