Twitter bootstrap modal animation on close

Question

Я пытаюсь добавить анимацию в bootstraps modal, используя библиотеку 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 работают правильно и CSS на основе анимации, предоставляемые библиотекой animate.less

Я уверен, что им не вызывая шкурку правильно , может быть, скрыть скрывает класс перед анимацией. Я не уверен, любая помощь будет большой.

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 здесь потому, что отскок анимация больше чем значение по умолчанию ...

Добавлена ​​если брекеты и прекрасно работает