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

Question

我有以下小提琴示例： http : //jsfiddle.net/c2mmQ/

单击显示链接，然后淡入并使用CSS动画按比例放大时，使用jQuery显示模式的地方。 在模态内部，我还有另一个链接可以调整模态的大小。 这个想法是，它应该从中间调整大小，以便看起来像是在放大（尽管我们实际上并未更改比例，因为实际上是在更改模态的尺寸）。 想想弹出窗口如何在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/