1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-02 01:42:36 +02:00

use transforms to make the dialog smooooth

This commit is contained in:
fat
2013-07-26 22:09:31 -07:00
parent fff2854c5e
commit 2cf1851d9f
5 changed files with 24 additions and 12 deletions

View File

@@ -120,6 +120,12 @@
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}
// Transformations
.rotate(@degrees) {

View File

@@ -25,11 +25,11 @@
z-index: @zindex-modal-background;
// When fading in the modal, animate it to slide down
&.fade {
top: -25%;
.transition(~"opacity 0.3s linear, top 0.3s ease-out");
&.fade .modal-dialog {
.translate(0, -25%);
.transition-transform(~"0.3s ease-out");
}
&.fade.in { top: 0; }
&.fade.in .modal-dialog { .translate(0, 0)}
}
// Shell div to position the modal with bottom padding