[英]Animate.css interaction with bootstrap modals, problems with close animation
我正在MEAN堆栈中建立一个网站。 我正在使用animate.css,尽管动画是干净的,但文档并不十分清楚。 说明是“只需加水”,IE只需添加动画类和您想要的特定动画类型的类。 我有一个模态,内置在jquery中,如下所示:
var listModal = '<!-- Modal -->'+
'<div id="testModal'+ v.id +'" class="testModal modal animated flipInX fade" tabindex="-1" role="dialog" aria-labelledby="'+ v.id +'-label" aria-hidden="true">'+
'<div class="modal-backdrop fade"></div>'+
'<div class="modal-dialog modal-lg">'+
'<div class="modal-content">'+
'<div class="modal-header testModalBar">'+
'<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>'+
'<h4 class="test4 modal-title" id="'+ v.id +'-label"> '+ v.client +'</h4>'+
'</div>'+
'<div class="modal-body">'+
'<h3 class="test3">'+ v.title +'</h3>'+
'<div class="row">'+
'<div class="col-md-6">'+
'<h5 class="test"> Challenge: </h5>'+
'<p id="challengeText">'+ v.challenge +'</p>'+
'<h5 class="test"> Solution: </h5>'+
'<p id="challengeText">'+ v.solution +'</p>'+
'<h5 class="test"> Return: </h5>'+
'<p id="challengeText">'+ v.ret +'</p>'+
'</div>'+
'<div class="col-md-6">'+
'<img src="/images/'+ v.img +'" alt="">'+
'</div>'+
'</div>'+
'</div>'+
'<div class="modal-footer">'+
'<button id="testBtn'+ v.id +'" type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>'+
'</div>'+
'</div>'+
'</div>'+
'</div>'+
'<!-- Modal end -->';
flipInX动画和淡入淡出动画可以很好地协同工作,但是我似乎无法获得任何接近的动画。 我尝试过只添加类,并且尝试过通过hide.bs.modal和hidden.bs.modal事件在模式的close事件上添加close动画类,如下所示:
$("testModal" + v.id).on("hide.bs.modal", function (e) {
$("#testModal" + v.id).addClass("flipOutY");
});
$("testModal" + v.id).on("hidden.bs.modal", function (e) {
$("#testModal" + v.id).removeClass("flipOutY");
});
这是行不通的。 静态添加类无效。 如何使用引导程序模态和animate.css成功合并关闭动画?
$('.modal').on('show.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog fadeIn animated');
})
$('.modal').on('hide.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog fadeOut animated');
})
我有同样的确切问题,这对我有所帮助:-
$(".modal .close").click( function() {
if ($($this).hasClass('flipInY'))
$($this).removeClass('flipInY');
$($this).addClass('flipOutY');
setTimeout( function(){
$($this).modal('hide');
}, 500);
});
希望它也对您有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.