feat(carousel): Use transitionend event instead of setTimeout

setTimeout for timing transitions can be iffy at best (especially when view port is obscured)

This fix removes the setTimeout and replaces it with a "once" `transitionend` event

lib/components/carousel.vue

@@ -77,18 +77,16 @@
 
 <script>
     import { from as arrayFrom } from '../utils/array';
-    import {observeDom} from '../utils';
+    import {addEventListenerOnce, observeDom} from '../utils';
 
     const DIRECTION = {
         next: {
-            current: 'carousel-item-left',
-            next: 'carousel-item-left',
-            overlay: 'carousel-item-next'
+            dirClass: 'carousel-item-left',
+            overlayClass: 'carousel-item-next'
         },
         prev: {
-            current: 'carousel-item-right',
-            next: 'carousel-item-right',
-            overlay: 'carousel-item-prev'
+            dirClass: 'carousel-item-right',
+            overlayClass: 'carousel-item-prev'
         }
     };
 
@@ -253,10 +251,6 @@
             }
 
         },
-        created() {
-            // Create private properties
-            this._carouselAnimation = null;
-        },
         mounted() {
             // Get all slides
             this.updateSlides();
@@ -314,28 +308,29 @@
                 // Update v-model
                 this.$emit('input', this.index);
 
-                nextSlide.classList.add(direction.overlay);
+                nextSlide.classList.add(direction.overlayClass);
                 // Trigger a reflow of next slide
                 // eslint-ignore-next-line no-void
                 void(nextSlide.offsetHeight);
 
-                currentSlide.classList.add(direction.current);
-                nextSlide.classList.add(direction.next);
+                currentSlide.classList.add(direction.dirClasst);
+                nextSlide.classList.add(direction.dirClass);
 
-                // Clear transition classes after 0.6s transition duration
-                this._carouselAnimation = setTimeout(() => {
-                    nextSlide.classList.remove(direction.next);
-                    nextSlide.classList.remove(direction.overlay);
+                // Clear transition classes after transition ends
+                addEventListenerOnce(currentSlide, 'transitionend', (evt) => {
+                    nextSlide.classList.remove(direction.dirClass);
+                    nextSlide.classList.remove(direction.overlayClass);
                     nextSlide.classList.add('active');
 
                     currentSlide.classList.remove('active');
-                    currentSlide.classList.remove(direction.current);
-                    currentSlide.classList.remove(direction.overlay);
+                    currentSlide.classList.remove(direction.dirClass);
+                    currentSlide.classList.remove(direction.overlayClass);
 
                     currentSlide.setAttribute('aria-current', 'false');
                     nextSlide.setAttribute('aria-current', 'true');
                     currentSlide.setAttribute('aria-hidden', 'true');
                     nextSlide.setAttribute('aria-hidden', 'false');
+
                     currentSlide.tabIndex = -1;
                     nextSlide.tabIndex = -1;
 
@@ -346,15 +341,14 @@
                             nextSlide.focus();
                         });
                     }
+
                     this.isSliding = false;
                     // Notify ourselves that we're done sliding (slid)
-                    this.$emit('slid', val);
-                    
-                }, 601);
+                    this.$nextTick(() => this.$emit('slid', val));
+                });
             }
         },
         destroyed() {
-            clearTimeout(this._carouselAnimation);
             clearInterval(this.intervalId);
         }
     };