Fix carousel transition duration (#25218)

docs/4.0/components/carousel.md

@@ -325,3 +325,7 @@ $('#myCarousel').on('slide.bs.carousel', function () {
   // do something…
 })
 {% endhighlight %}
+
+### Change transition duration
+
+The transition duration of `.carousel-item` can be changed with the `$carousel-transition` Sass variable before compiling or custom styles if you're using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. `transition: transform 2s ease, opacity .5s ease-out`). The transition duration must be the same for each carousel item.

js/src/carousel.js

@@ -15,16 +15,16 @@ 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 TRANSITION_DURATION    = 600
-  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 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 Default = {
     interval : 5000,
@@ -89,18 +89,20 @@ const Carousel = (($) => {
 
   class Carousel {
     constructor(element, config) {
-      this._items             = null
-      this._interval          = null
-      this._activeElement     = null
+      this._items              = null
+      this._interval           = null
+      this._activeElement      = null
 
-      this._isPaused          = false
-      this._isSliding         = false
+      this._isPaused           = false
+      this._isSliding          = false
 
-      this.touchTimeout       = null
+      this.touchTimeout        = null
 
-      this._config            = this._getConfig(config)
-      this._element           = $(element)[0]
-      this._indicatorsElement = $(this._element).find(Selector.INDICATORS)[0]
+      this._config             = this._getConfig(config)
+      this._element            = $(element)[0]
+      this._indicatorsElement  = $(this._element).find(Selector.INDICATORS)[0]
+
+      this._transitionDuration = this._getTransitionDuration()
 
       this._addEventListeners()
     }
@@ -223,6 +225,24 @@ 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)
@@ -398,7 +418,7 @@ const Carousel = (($) => {
 
             setTimeout(() => $(this._element).trigger(slidEvent), 0)
           })
-          .emulateTransitionEnd(TRANSITION_DURATION)
+          .emulateTransitionEnd(this._transitionDuration)
       } else {
         $(activeElement).removeClass(ClassName.ACTIVE)
         $(nextElement).addClass(ClassName.ACTIVE)

js/tests/visual/carousel.html

@@ -5,12 +5,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
     <title>Carousel</title>
+    <style>
+      .carousel-item {
+        transition: transform 2s ease, opacity .5s ease;
+      }
+    </style>
   </head>
   <body>
     <div class="container">
       <h1>Carousel <small>Bootstrap Visual Test</small></h1>
 
-      <p>Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.</p>
+      <p>The transition duration should be around 2s. Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.</p>
 
       <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
         <ol class="carousel-indicators">
@@ -46,9 +51,15 @@
 
     <script>
       $(function() {
+        var t0, t1;
+
         // Test to show that the carousel doesn't slide when the current tab isn't visible
+        // Test to show that transition-duration can be changed with css
         $('#carousel-example-generic').on('slid.bs.carousel', function(event) {
-          console.log('slid at ', event.timeStamp)
+          t1 = performance.now()
+          console.log('transition-duration took' + (t1 - t0) + 'ms, slid at ', event.timeStamp)
+        }).on('slide.bs.carousel', function() {
+          t0 = performance.now()
         })
       })
     </script>

scss/_variables.scss

@@ -870,7 +870,7 @@ $carousel-control-icon-width:       20px !default;
 $carousel-control-prev-icon-bg:     str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
 $carousel-control-next-icon-bg:     str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
 
-$carousel-transition:               transform .6s ease !default;
+$carousel-transition:               transform .6s ease !default; // Define transform transition first if using multiple transitons (e.g., `transform 2s ease, opacity .5s ease-out`)
 
 
 // Close