Variable transition durations (#25662)

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)