From 2cf1851d9f9ea73a9c2e446db88f5c2179ea2f40 Mon Sep 17 00:00:00 2001 From: fat Date: Fri, 26 Jul 2013 22:09:31 -0700 Subject: use transforms to make the dialog smooooth --- less/mixins.less | 6 ++++++ less/modals.less | 8 ++++---- 2 files changed, 10 insertions(+), 4 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 447ee86c3..2fb9a8ff4 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -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) { diff --git a/less/modals.less b/less/modals.less index 52c1b0df8..8b7349cef 100644 --- a/less/modals.less +++ b/less/modals.less @@ -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 -- cgit v1.2.3