Bootstrap模态缩小动画

Question

我正在尝试在 hide() 上实现缩小动画，based on the answer on the github repo of bootstrap-modal（使用 Bootstrap 2.3.2）。

想法是添加一个 CSS 转换，并拦截 hide 事件，例如：

$modal.on('hide', function () {    
    $modal.css({top: 0, left: 0, transform: 'scale(0.1, 0.1)'});
//  return false;    // uncomment this line to see zoom out
});

问题是模式在有机会看到动画之前就被隐藏了。返回false显示动画，但阻止模态框完成隐藏。

如何完成隐藏过程但仍能看到动画？

见 fiddle http://jsfiddle.net/dtyohc28/5/

TIA

Answer 1

http://jsfiddle.net/dtyohc28/6/试试这个，而不是使用 on('hide')，创建你自己的函数来控制它。

$('#dismissModal').click(function(){
    $modal.css({top: 0, left: 0, transform: 'scale(0.1, 0.1)', opacity:'0'});
    setTimeout(function(){
        $('.modal').modal('hide')
    },750);
});

Answer 2

有点老套，但很管用。 http://jsfiddle.net/dtyohc28/7/

$modal.on('hide', function () {    
    $modal.css({top: 0, left: 0, transform: 'scale(0.1, 0.1)'});
    if($modal.css('top')!="0px"){
        setTimeout(function(){
            $modal.modal('hide');
        }, 750);
        return false;
    }
});

Bootstrap模态缩小动画

Bootstrap Modal zoom out animation

javascript

jquery

css

twitter-bootstrap

bootstrap-modal