Question

我试图在based on the answer的github repo上的hide（），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会显示动画，但会使模态框无法完成隐藏。

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

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

Bootstrap Modal缩小动画

2 个答案: