Question

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

动画在显示模态时完全正常工作。但是在隐藏模态时，动画无效。我创建了一个jsfiddle来复制它。

<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 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大括号并且效果很好

Twitter引导模态动画关闭

1 个答案: