Bootstrap 模态缩小动画

Question

我正在尝试在 bootstrap-modal 的 github 存储库上的 hide()、based on the answer 上实现缩小动画（使用 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 会显示动画，但会阻止模态框完成隐藏。

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

请参阅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);
});