1

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

当显示模态时，动画完全工作。但是在隐藏模式时，动画不起作用。我创建了一个 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">×&lt;/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/

4

1 回答 1

5

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

于 2013-03-12T10:26:53.210 回答