[英]css3 animation.css not working with custom modal
I was trying to create my own Full page modal and I got success in that but now I want to add a animation to it... am using animate.css to achieve this task but the animation is not working only when add a zoomIn or zoomOut animation class 我尝试创建自己的全页模式,但在此过程中我获得了成功,但是现在我想向其中添加动画...正在使用animate.css来完成此任务,但是仅当添加zoomIn或zoomOut动画类
here is JSFiddel what I tried... any help be appreciated... 这是我尝试过的JSFiddel 。
My Html 我的HTML
<div class="am-modal" id="examples-modal">
<a href="javascript:void(0);" class="am-colse"> Back</a>
<div class="head">
Trying Modal with zoonIn and out effect
</div>
</div>
<a href="javascript:void(0)" class="am-modal-trigger" data-am-target="#examples-modal">Modal Trigger</a>
Css 的CSS
.am-modal {
display: none;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
background-color: #2c3e50;
padding : 20px;
}
.am-modal a{
float : float;
}
.head{
margin-top : 40px;
font-size : 25px;
color : #fff;
text-align : center;
}
Jquery jQuery的
$(document).ready(function(e) {
resizeDiv();
window.onresize = function(event) {
resizeDiv();
}
function resizeDiv() {
vpw = $(window).width();
vph = $(window).height();
$('.am-modal').css('height', vph + "px");
}
$('.am-modal-trigger').on('click', function() {
var target = $(this).data('am-target');
$(target).css('display','block');
$(target).addClass('zoomIn');
});
$('.am-colse').on('click', function() {
$(this).parent().removeClass('zoomIn').addClass('zoomOut');
$(this).parent().css('display','none');
});
});
When you add the zoomIn class to your modal are you being sure to add the animated
class? 将zoomIn类添加到模态中时,是否确定要添加
animated
类? This worked on the JSFiddel you provided: 这适用于您提供的JSFiddel:
<div class="am-modal animated zoomIn" id="examples-modal">
<a href="javascript:void(0);" class="am-colse"> Back</a>
<div class="head">
Trying Modal with zoonIn and out effect
</div>
</div>
Let me know if this works for you. 让我知道这是否适合您。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.