kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

fix get the transition duration parent

Browse source
This commit is contained in:
Johann-S 2018-03-13 10:38:36 +01:00
parent 1fadad1c33
commit 2c41b0aea6
2 changed files with 11 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
js/src/util.js
View file

@ -106,19 +106,22 @@ const Util = (($) => {
}, },
getTransitionDurationFromElement(element) { getTransitionDurationFromElement(element) {
if (!element) {
return 0
}
// Get transition-duration of the element // Get transition-duration of the element
let transitionDuration = $(element).css('transition-duration') let transitionDuration = $(element).css('transition-duration')
const floatTransitionDuration = parseFloat(transitionDuration)
// Return 0 if element or transition duration is not found // Return 0 if element or transition duration is not found
if (!transitionDuration) { if (!floatTransitionDuration) {
return 0 return 0
} }
// If multiple durations are defined, take the first // If multiple durations are defined, take the first
transitionDuration = transitionDuration.split(',')[0] transitionDuration = transitionDuration.split(',')[0]
// jQuery always converts transition durations into seconds,
// so multiply by 1000
return parseFloat(transitionDuration) * MILLISECONDS_MULTIPLIER return parseFloat(transitionDuration) * MILLISECONDS_MULTIPLIER
}, },

19
js/tests/unit/util.js
View file

@ -46,44 +46,35 @@ $(function () {
assert.expect(1) assert.expect(1)
var $div = $('<div style="transition: all 300ms ease-out;"></div>').appendTo($('#qunit-fixture')) var $div = $('<div style="transition: all 300ms ease-out;"></div>').appendTo($('#qunit-fixture'))
assert.strictEqual(Util.getTransitionDurationFromElement($div), 300) assert.strictEqual(Util.getTransitionDurationFromElement($div[0]), 300)
}) })
QUnit.test('Util.getTransitionDurationFromElement should accept transition durations in seconds', function (assert) { QUnit.test('Util.getTransitionDurationFromElement should accept transition durations in seconds', function (assert) {
assert.expect(1) assert.expect(1)
var $div = $('<div style="transition: all .4s ease-out;"></div>').appendTo($('#qunit-fixture')) var $div = $('<div style="transition: all .4s ease-out;"></div>').appendTo($('#qunit-fixture'))
assert.strictEqual(Util.getTransitionDurationFromElement($div), 400) assert.strictEqual(Util.getTransitionDurationFromElement($div[0]), 400)
}) })
QUnit.test('Util.getTransitionDurationFromElement should get the first transition duration if multiple transition durations are defined', function (assert) { QUnit.test('Util.getTransitionDurationFromElement should get the first transition duration if multiple transition durations are defined', function (assert) {
assert.expect(1) assert.expect(1)
var $div = $('<div style="transition: transform .3s ease-out, opacity .2s;"></div>').appendTo($('#qunit-fixture')) var $div = $('<div style="transition: transform .3s ease-out, opacity .2s;"></div>').appendTo($('#qunit-fixture'))
assert.strictEqual(Util.getTransitionDurationFromElement($div), 300) assert.strictEqual(Util.getTransitionDurationFromElement($div[0]), 300)
}) })
QUnit.test('Util.getTransitionDurationFromElement should return 0 if transition duration is not defined', function (assert) { QUnit.test('Util.getTransitionDurationFromElement should return 0 if transition duration is not defined', function (assert) {
assert.expect(1) assert.expect(1)
var $div = $('<div></div>').appendTo($('#qunit-fixture')) var $div = $('<div></div>').appendTo($('#qunit-fixture'))
assert.strictEqual(Util.getTransitionDurationFromElement($div), 0) assert.strictEqual(Util.getTransitionDurationFromElement($div[0]), 0)
}) })
QUnit.test('Util.getTransitionDurationFromElement should return 0 if element is not found in DOM', function (assert) { QUnit.test('Util.getTransitionDurationFromElement should return 0 if element is not found in DOM', function (assert) {
assert.expect(1) assert.expect(1)
var $div = $('#fake-id') var $div = $('#fake-id')
assert.strictEqual(Util.getTransitionDurationFromElement($div), 0) assert.strictEqual(Util.getTransitionDurationFromElement($div[0]), 0)
})
QUnit.test('Util.getTransitionDurationFromElement should properly handle inherited transition durations', function (assert) {
assert.expect(1)
var $parent = $('<div style="transition-duration: 5s;"></div>')
var $child = $('<div style="transition-duration: inherit;"></div>')
$('#qunit-fixture').append($parent.append($child))
assert.strictEqual(Util.getTransitionDurationFromElement($child), 5000)
}) })
QUnit.test('Util.getUID should generate a new id uniq', function (assert) { QUnit.test('Util.getUID should generate a new id uniq', function (assert) {