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/dtyoc28/5/

TIA

Answer 1

有点老套但有效。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;
    }
});