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はアニメーションの前にhiddenクラスを配置しています。よくわかりませんが、どんな助けでも素晴らしいでしょう。

JSフィドルリンク： http： //jsfiddle.net/W6G4q/1/

4

1 に答える 1

5

私はjQueryまたはBootstrapNinjaではありませんが、回避策を実行しようとしましたが、機能しているようです。

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 に答える