Prevent the background to be shown when transitioning

2 files changed, 16 insertions, 2 deletions

diff --git a/js/src/util.js b/js/src/util.js
index 622b46837..92ad2a722 100644
--- a/js/src/util.js
+++ b/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) {
diff --git a/js/tests/unit/util.js b/js/tests/unit/util.js
index 768afc8fe..abe153a22 100644
--- a/js/tests/unit/util.js
+++ b/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'))