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/

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

1 个答案: