calculate modal transition duration based on modal-dialog element

2 files changed, 47 insertions, 1 deletions

diff --git a/js/src/modal.js b/js/src/modal.js
index ae71a268be..2c71baf736 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -260,7 +260,7 @@ class Modal {
     }
 
     if (transition) {
-      const transitionDuration  = Util.getTransitionDurationFromElement(this._element)
+      const transitionDuration  = Util.getTransitionDurationFromElement(this._dialog)
 
       $(this._dialog)
         .one(Util.TRANSITION_END, transitionComplete)
diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js
index c8f247a350..7c8299109e 100644
--- a/js/tests/unit/modal.js
+++ b/js/tests/unit/modal.js
@@ -1,6 +1,8 @@
 $(function () {
   'use strict'
 
+  window.Util = typeof bootstrap !== 'undefined' ? bootstrap.Util : Util
+
   QUnit.module('modal plugin')
 
   QUnit.test('should be defined on jquery object', function (assert) {
@@ -651,4 +653,48 @@ $(function () {
       .bootstrapModal('show')
       .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()
+  })
 })