Permalink
Browse files

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
  • Loading branch information...
tmorehouse committed Aug 12, 2017
1 parent 0869ffd commit 192dfb824ca806ee398cebdcc0a93a109b33d93a
Showing with 18 additions and 24 deletions.
  1. +18 −24 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);
}
};

0 comments on commit 192dfb8

Please sign in to comment.