Prevent the background to be shown when transitioning

js/src/util.js

@@ -93,17 +93,21 @@ const Util = {
 
     // Get transition-duration of the element
     let transitionDuration = $(element).css('transition-duration')
+    let transitionDelay = $(element).css('transition-delay')
+
     const floatTransitionDuration = parseFloat(transitionDuration)
+    const floatTransitionDelay = parseFloat(transitionDelay)
 
     // Return 0 if element or transition duration is not found
-    if (!floatTransitionDuration) {
+    if (!floatTransitionDuration && !floatTransitionDelay) {
       return 0
     }
 
     // If multiple durations are defined, take the first
     transitionDuration = transitionDuration.split(',')[0]
+    transitionDelay = transitionDelay.split(',')[0]
 
-    return parseFloat(transitionDuration) * MILLISECONDS_MULTIPLIER
+    return (parseFloat(transitionDuration) + parseFloat(transitionDelay)) * MILLISECONDS_MULTIPLIER
   },
 
   reflow(element) {

js/tests/unit/util.js

@@ -75,6 +75,16 @@ $(function () {
     assert.strictEqual(Util.getTransitionDurationFromElement($div[0]), 400)
   })
 
+  QUnit.test('Util.getTransitionDurationFromElement should return the addition of transition-delay and transition-duration', function (assert) {
+    assert.expect(2)
+    var $fixture = $('#qunit-fixture')
+    var $div = $('<div style="transition: all 0s 2ms ease-out;"></div>').appendTo($fixture)
+    var $div2 = $('<div style="transition: all .25s 30ms ease-out;"></div>').appendTo($fixture)
+
+    assert.strictEqual(Util.getTransitionDurationFromElement($div[0]), 2)
+    assert.strictEqual(Util.getTransitionDurationFromElement($div2[0]), 280)
+  })
+
   QUnit.test('Util.getTransitionDurationFromElement should get the first transition duration if multiple transition durations are defined', function (assert) {
     assert.expect(1)
     var $div = $('<div style="transition: transform .3s ease-out, opacity .2s;"></div>').appendTo($('#qunit-fixture'))

scss/_carousel.scss

@@ -89,12 +89,15 @@
   .carousel-item.active,
   .carousel-item-next.carousel-item-left,
   .carousel-item-prev.carousel-item-right {
+    z-index: 1;
     opacity: 1;
   }
 
   .active.carousel-item-left,
   .active.carousel-item-right {
+    z-index: 0;
     opacity: 0;
+    @include transition(0s $carousel-transition-duration opacity);
   }
 }
 
@@ -108,6 +111,7 @@
   position: absolute;
   top: 0;
   bottom: 0;
+  z-index: 1;
   // Use flex for alignment (1-3)
   display: flex; // 1. allow flex styles
   align-items: center; // 2. vertically center contents

scss/_variables.scss

@@ -1006,7 +1006,8 @@ $carousel-control-icon-width:        20px !default;
 $carousel-control-prev-icon-bg:      str-replace(url("data:image/svg+xml,%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,%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; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+$carousel-transition-duration:       .6s !default;
+$carousel-transition:                transform $carousel-transition-duration ease !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
 
 
 // Close