Bootstrap Modal缩小动画

Question

我试图基于 bootstrap-modal的github回购上的答案 （使用Bootstrap 2.3.2）在hide（）上实现缩小动画。

这个想法是添加一个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显示动画，但会阻止模式框完成隐藏。

如何完成隐藏过程但仍然可以看到动画？

参见http://jsfiddle.net/dtyohc28/5/的小提琴

TIA

Answer 1

有点hacky，但是可以用。 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;
    }
});

Answer 2

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);
});