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

Variable transition durations (#25662)

Browse Source
This commit is contained in:
Martijn Cuppens
2018-03-13 09:59:20 +01:00
committed by Johann-S
parent 1859595cb6
commit 1fadad1c33
11 changed files with 168 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
js/tests/visual/alert.html
View File

@@ -42,6 +42,13 @@
<button type="button" class="btn btn-primary">Or do this</button>
</p>
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert" style="transition-duration: 5s;">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
This alert will take 5 seconds to fade out.
</div>
</div>
<script src="../../../assets/js/vendor/jquery-slim.min.js"></script>

37
js/tests/visual/modal.html
View File

@@ -147,6 +147,26 @@
</div>
</div>
<div class="modal fade" id="slowModal" tabindex="-1" role="dialog" aria-labelledby="slowModalLabel" aria-hidden="true" style="transition-duration: 5s;">
<div class="modal-dialog" role="document" style="transition-duration: inherit;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="slowModalLabel">Lorem slowly</h4>
</div>
<div class="modal-body">
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
@@ -164,6 +184,12 @@
<br><br>
<button type="button" class="btn btn-secondary btn-lg" data-toggle="modal" data-target="#slowModal">
Launch modal with slow transition
</button>
<br><br>
<div class="bg-dark text-white p-2" id="tall" style="display: none;">
Tall body content to force the page to have a scrollbar.
</div>
@@ -225,6 +251,17 @@
})
.modal('show')
})
// Test transition duration
var t0, t1;
$('#slowModal').on('shown.bs.modal', function(){
t1 = performance.now()
console.log('transition-duration took ' + (t1 - t0) + 'ms.')
}).on('show.bs.modal', function(){
t0 = performance.now()
})
})
</script>
</body>