我试图创建我自己的整页模态,我在这方面取得了成功,但现在我想给它添加一个动画......正在使用 animate.css实现此任务,但仅当添加 zoomIn 或 zoomOut 动画类时动画不工作
这里是 JSFiddel我试过的...任何帮助不胜感激...
我的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
.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;
}
查询
$(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');
});
});
最佳答案
关于javascript - css3 animation.css 不适用于自定义模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35395025/