Twitter引導模態動畫關閉

Question

我想添加動畫引導模態使用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">×</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在動畫之前會放入隱藏的類。林不知道，任何幫助將是偉大的。

JS提琴鏈接：http://jsfiddle.net/W6G4q/1/

Answer 1

我不是一個jQuery或引導忍者，但我試圖做一個變通方法，它似乎是工作：

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是因爲這裏的反彈動畫比默認的一個長...

添加的，如果括號和完美的作品