javascript - Bootstrap Modal zoom out animation - Stack Overflow

admin管理员组

文章数量:1356960

I'm trying to implement a zoom out animation on hide(), based on the answer on the github repo of bootstrap-modal (using Bootstrap 2.3.2).

The idea is to add a CSS transition, and intercept the hide event, something like:

$modal.on('hide', function () {    
    $modal.css({top: 0, left: 0, transform: 'scale(0.1, 0.1)'});
//  return false;    // unment this line to see zoom out
});

The problem is that the modal is hidden before there's a chance to see the animation. Returning false shows the animation, but keeps the modal box from pleting the hiding.

How can I plete the hide process but still see the animation?

See fiddle at /

TIA

I'm trying to implement a zoom out animation on hide(), based on the answer on the github repo of bootstrap-modal (using Bootstrap 2.3.2).

The idea is to add a CSS transition, and intercept the hide event, something like:

$modal.on('hide', function () {    
    $modal.css({top: 0, left: 0, transform: 'scale(0.1, 0.1)'});
//  return false;    // unment this line to see zoom out
});

The problem is that the modal is hidden before there's a chance to see the animation. Returning false shows the animation, but keeps the modal box from pleting the hiding.

How can I plete the hide process but still see the animation?

See fiddle at http://jsfiddle/dtyohc28/5/

TIA

• javascript
• jquery
• css
• twitter-bootstrap
• bootstrap-modal

Share Improve this question Follow edited Jan 27, 2019 at 4:03 isapir asked Mar 31, 2015 at 0:51 isapirisapir 23.7k1616 gold badges125125 silver badges121121 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

A little hacky but works. http://jsfiddle/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;
    }
});

http://jsfiddle/dtyohc28/6/ Try this, instead of using on('hide'), make your own function to control it.

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

本文标签： javascriptBootstrap Modal zoom out animationStack Overflow