rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

calculate modal transition duration based on modal-dialog element

Browse Source
This commit is contained in:
Johann-S 2018-10-26 16:43:20 +02:00 committed by XhmikosR
parent 47ef0a877e
commit ffc8d507c7
2 changed files with 47 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/src/modal.js
View File

@ -260,7 +260,7 @@ class Modal {
} }
if (transition) { if (transition) {
const transitionDuration = Util.getTransitionDurationFromElement(this._element) const transitionDuration = Util.getTransitionDurationFromElement(this._dialog)
$(this._dialog) $(this._dialog)
.one(Util.TRANSITION_END, transitionComplete) .one(Util.TRANSITION_END, transitionComplete)

46
js/tests/unit/modal.js
View File

@ -1,6 +1,8 @@
$(function () { $(function () {
'use strict' 'use strict'
window.Util = typeof bootstrap !== 'undefined' ? bootstrap.Util : Util
QUnit.module('modal plugin') QUnit.module('modal plugin')
QUnit.test('should be defined on jquery object', function (assert) { QUnit.test('should be defined on jquery object', function (assert) {
@ -651,4 +653,48 @@ $(function () {
.bootstrapModal('show') .bootstrapModal('show')
.bootstrapModal('hide') .bootstrapModal('hide')
}) })
QUnit.test('transition duration should be the modal-dialog duration before triggering shown event', function (assert) {
assert.expect(2)
var done = assert.async()
var style = [
'<style>',
' .modal.fade .modal-dialog {',
' transition: -webkit-transform .3s ease-out;',
' transition: transform .3s ease-out;',
' transition: transform .3s ease-out,-webkit-transform .3s ease-out;',
' -webkit-transform: translate(0,-50px);',
' transform: translate(0,-50px);',
' }',
'</style>'
].join('')
var $style = $(style).appendTo('head')
var modalHTML = [
'<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">',
' <div class="modal-dialog" role="document">',
' <div class="modal-content">',
' <div class="modal-body">...</div>',
' </div>',
' </div>',
'</div>'
].join('')
var beginTimestamp = 0
var $modal = $(modalHTML).appendTo('#qunit-fixture')
var $modalDialog = $('.modal-dialog')
var transitionDuration = Util.getTransitionDurationFromElement($modalDialog[0])
assert.strictEqual(transitionDuration, 300)
$modal.on('shown.bs.modal', function () {
var diff = Date.now() - beginTimestamp
assert.ok(diff < 400)
$style.remove()
done()
})
.bootstrapModal('show')
beginTimestamp = Date.now()
})
}) })