Bootstrap Modal缩小动画

Question

我试图在hide（）上实现缩小动画，based on the answer上的bootstrap-modal（使用Bootstrap 2.3.2）的github回购。

的想法是添加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

有点哈克，但工程。 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/试试这个，而不是使用上（ '隐藏'），使自己的功能来控制它。

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