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

Question

我有以下 fiddle 示例:http://jsfiddle.net/c2mmQ/

当我点击显示链接时，我使用 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/