twitter-bootstrap 关闭时的 Twitter 引导模式动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15354644/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap modal animation on close
提问by mayankbatra
I am trying to add animation to bootstraps modal using animate.less library.
我正在尝试使用 animate.less 库将动画添加到引导模式。
The animation is working completely when it is to show the modal. But on hide of the modal the animation is not working. I have created a jsfiddle to replicate the same.
当要显示模态时，动画完全正常工作。但是在隐藏模态时，动画不起作用。我创建了一个 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
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 and bounceInLeft are working properly and are css based animations provided by the library animate.less
BounceOutRight 和 BounceInLeft 工作正常，是由 animate.less 库提供的基于 css 的动画
I am sure im not calling hide correctly, maybe hide is putting in the hidden class before the animation. Im not sure, any help would be great.
我确定我没有正确调用隐藏，也许隐藏在动画之前放入隐藏类。我不确定，任何帮助都会很棒。
JS fiddle link: http://jsfiddle.net/W6G4q/1/
JS小提琴链接：http: //jsfiddle.net/W6G4q/1/
回答by Julien
I'm not a jQuery or Bootstrap Ninja but I tried to do a workaround and it seems to be working:
我不是 jQuery 或 Bootstrap Ninja，但我试图做一个解决方法，它似乎有效：
HTML
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
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');
});
});
Short explication : In fact modal is shown manually. Then, on hidden you prevent action to change class as you want and after this you manually close the modal. setTimeout is here because bounce animation is longer than the default one...
简短说明：实际上模态是手动显示的。然后，在隐藏时，您可以根据需要阻止更改类的操作，然后手动关闭模态。setTimeout 在这里是因为反弹动画比默认动画长......
Added the if braces and works perfectly
添加了 if 大括号并完美运行
