使用JavaScript和CSS从中心调整模态大小

Question

我有以下提琴的例子:http://jsfiddle.net/c2mmQ/

当我点击show链接时，我使用jQuery显示一个模态，并使用CSS动画将其淡入和缩放。在模态中，我有另一个链接来调整模态的大小。这个想法是，它应该从中间调整大小，所以它看起来像它的缩放(虽然我们没有使用规模，因为我们实际上是改变模态的尺寸)。想想Xbox 360上的弹出窗口。

发生了两个问题。首先，虽然调整大小确实尊重CSS转换，但它们不会触发事件transitionend，因此中心代码不会在调整大小后运行。第二个问题是，调整大小不会从中心开始…

我该怎么做呢?

代码如下:

jQuery.fn.centerImage = function () {
    var win = window.parent;
    var element = $(this);
    var centerElement = function () {
        element.css("position", "absolute");
        element.css("top", ( (($(win).height()) - element.outerHeight()) / 2));
        element.css("left", ( (($(win).width()) - element.outerWidth()) / 2));
    }
    element.bind('centerElement', centerElement).trigger('centerElement');
    $($(win)).bind('resize', function () {
        element.trigger('centerElement');
    });
    return element;
}
$(document).ready(function(){
    $('.show').on('click', function(e){
        $('.modal').centerImage().addClass('show');
    });
    $('.resize').on('click', function(e){
        $('.modal').width(640).height(480);
        $('modal').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
            $('.modal').centerImage();
        });
    });
});
.modal
{
    width: 480px;
    height: 320px;
    background: #ffffff;
    box-shadow: rgba(0,0,0,.6) 0 0 16px;
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.modal.show
{
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

Answer 1

你会后悔的!

$('modal').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
            $('.modal').centerImage();
        });

应为

$('.modal').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
            $('.modal').centerImage();
        });

http://jsfiddle.net/robschmuecker/c2mmQ/1/