diff options
author | Martijn Cuppens <martijn.cuppens@gmail.com> | 2018-03-13 11:59:20 +0300 |
---|---|---|
committer | Johann-S <johann.servoire@gmail.com> | 2018-03-13 11:59:20 +0300 |
commit | 1fadad1c33b99b94a4a821fe5c62c8064d129424 (patch) | |
tree | 8ea41f4bf03696e7718cc7c3e1216b7153b2fc85 /js/src/carousel.js | |
parent | 1859595cb6e1c92ba8134a7c12a087cb05f89688 (diff) |
Variable transition durations (#25662)
Diffstat (limited to 'js/src/carousel.js')
-rw-r--r-- | js/src/carousel.js | 43 |
1 files changed, 12 insertions, 31 deletions
diff --git a/js/src/carousel.js b/js/src/carousel.js index 4a64e7cc8f..54bb0791c9 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -15,16 +15,15 @@ const Carousel = (($) => { * ------------------------------------------------------------------------ */ - const NAME = 'carousel' - const VERSION = '4.0.0' - const DATA_KEY = 'bs.carousel' - const EVENT_KEY = `.${DATA_KEY}` - const DATA_API_KEY = '.data-api' - const JQUERY_NO_CONFLICT = $.fn[NAME] - const ARROW_LEFT_KEYCODE = 37 // KeyboardEvent.which value for left arrow key - const ARROW_RIGHT_KEYCODE = 39 // KeyboardEvent.which value for right arrow key - const TOUCHEVENT_COMPAT_WAIT = 500 // Time for mouse compat events to fire after touch - const MILLISECONDS_MULTIPLIER = 1000 + const NAME = 'carousel' + const VERSION = '4.0.0' + const DATA_KEY = 'bs.carousel' + const EVENT_KEY = `.${DATA_KEY}` + const DATA_API_KEY = '.data-api' + const JQUERY_NO_CONFLICT = $.fn[NAME] + const ARROW_LEFT_KEYCODE = 37 // KeyboardEvent.which value for left arrow key + const ARROW_RIGHT_KEYCODE = 39 // KeyboardEvent.which value for right arrow key + const TOUCHEVENT_COMPAT_WAIT = 500 // Time for mouse compat events to fire after touch const Default = { interval : 5000, @@ -102,8 +101,6 @@ const Carousel = (($) => { this._element = $(element)[0] this._indicatorsElement = $(this._element).find(Selector.INDICATORS)[0] - this._transitionDuration = this._getTransitionDuration() - this._addEventListeners() } @@ -225,24 +222,6 @@ const Carousel = (($) => { return config } - _getTransitionDuration() { - // Get transition-duration of first element in the carousel - let transitionDuration = $(this._element).find(Selector.ITEM).css('transition-duration') - - // Return 0 carousel item is not found - if (!transitionDuration) { - return 0 - } - - // If multiple durations are defined, take the first - transitionDuration = transitionDuration.split(',')[0] - - // Multiply by 1000 if transition-duration is defined in seconds - return transitionDuration.indexOf('ms') > -1 - ? parseFloat(transitionDuration) - : parseFloat(transitionDuration) * MILLISECONDS_MULTIPLIER - } - _addEventListeners() { if (this._config.keyboard) { $(this._element) @@ -406,6 +385,8 @@ const Carousel = (($) => { $(activeElement).addClass(directionalClassName) $(nextElement).addClass(directionalClassName) + const transitionDuration = Util.getTransitionDurationFromElement(activeElement) + $(activeElement) .one(Util.TRANSITION_END, () => { $(nextElement) @@ -418,7 +399,7 @@ const Carousel = (($) => { setTimeout(() => $(this._element).trigger(slidEvent), 0) }) - .emulateTransitionEnd(this._transitionDuration) + .emulateTransitionEnd(transitionDuration) } else { $(activeElement).removeClass(ClassName.ACTIVE) $(nextElement).addClass(ClassName.ACTIVE) |