mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-18 11:21:23 +02:00
Code Issues Releases Wiki Activity

Prevent the background to be shown when transitioning

Browse Source
This commit is contained in:
Martijn Cuppens
2018-10-29 21:11:50 +01:00
committed by XhmikosR
parent 5e6b53a7c0
commit 5aed968750
4 changed files with 22 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
js/src/util.js
View File

@@ -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) {

10
js/tests/unit/util.js
View File

@@ -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'))