Twitter引导模态动画关闭

Question

我正在尝试使用animate.less库将动画添加到bootstraps模式.

当要显示模态时,动画完全正常工作.但是在隐藏模态时,动画无效.我创建了一个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小提琴链接:http://jsfiddle.net/W6G4q/1/

Answer 1

我不是jQuery或Bootstrap忍者,但我试图做一个解决方法,它似乎工作:

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大括号并且完美运行