jquery - Twitter 关闭时 Bootstrap 模式动画

Question

我正在尝试使用 animate.less 库向 Bootstrap 模式添加动画。

当显示模态时，动画完全正常工作。但是在隐藏模式时动画不起作用。我创建了一个 jsfiddle 来复制相同的内容。

http://jsfiddle.net/W6G4q/1/

<a href="#" role="button" class="letclick btn btn-warning" id='loginLink' targetLink="login">     
        <i class="icon-user icon-white"></i>
        Sign In
    </a>
    <div class="modal hide login-modal animated bounceOutRight" tabindex="-1"  aria-labelledby="LoginModal" aria-hidden="true" id="login" >
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Login</h3>
</div>
<div class="modal-body">

 SHOWING
</div>
    <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
</div>

JS

     $('#loginLink').click(function(){
        $('#login').modal({
        backdrop: true,
        keyboard: true
    }).css({
        'width': function () {
            return (350) + 'px'; 
        },
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    });

        $('#login').toggleClass('bounceInLeft bounceOutRight')
    });
     $('#login').on('hide', function(){

        $(this).toggleClass('bounceOutRight bounceInLeft');


    });

bounceOutRight和bounceInLeft工作正常，并且是由animate.less库提供的基于css的动画

我确信我没有正确调用 hide，也许 hide 是在动画之前放入隐藏类。我不确定，任何帮助都会很棒。

JS fiddle 链接:http://jsfiddle.net/W6G4q/1/

Answer 1

我不是 jQuery 或 Bootstrap Ninja，但我尝试做一个解决方法，它似乎有效:

http://jsfiddle.net/DrCtZ/

HTML

<a href="#!" role="button" class="btn btn-warning" id='loginLink'>     
   <i class="icon-user icon-white"></i> Sign In
</a>

<div class="modal hide animated bounceInRight" id="login" >
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">X</button>
        <h3 id="myModalLabel">Login</h3>
    </div>

    <div class="modal-body">
        SHOWING
    </div>

    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">Close</button>
    </div>
</div>

JS

$(document).ready(function(){
        $('#loginLink').click(function(e){
            e.preventDefault();

            $('#login').on('hide', function(e) {
                if($('#login').hasClass('bounceInRight'))
                {   e.preventDefault();

                $('#login').removeClass('bounceInRight').addClass('bounceOutRight');

                setTimeout("$('#login').modal('hide')", 550);}
            });

            $('#login').modal('show');
        });
    });

简短说明: 事实上模态是手动显示的。然后，在隐藏时，您可以阻止根据需要更改类别的操作，然后手动关闭模式。 setTimeout 在这里是因为弹跳动画比默认动画长...

添加了 if 大括号并完美运行