CSS3 动画.css不适用于自定义模态
css3 animation.css not working with custom modal
我试图创建自己的整页模式,我取得了成功,但现在我想为它添加一个动画......正在使用 Animate.css 来完成此任务,但动画仅在添加放大或缩小动画类时才起作用
这是我尝试过的JSFiddel...任何帮助不胜感激...
我的网页
<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;
}
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');
});
});
jsfiddle 你需要添加类"动画">
<div class="am-modal animated" id="examples-modal">
尝试具有 zoonIn和Out 效果的模态
当您将 zoomIn 类添加到模态时,是否确定要添加animated
类?这适用于您提供的 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>
让我知道这是否适合您。
相关文章:
- 如何在angular ui模态控制器中定义函数
- 从谷歌地图自定义控件打开离子模态时遇到问题
- 自举模态力滚动到顶部
- 使用角度模态服务(AngularJS)自定义模态
- 只使用ReactJS关注自定义模态
- 离子模态未打开(类型错误:无法读取未定义的属性“显示”)
- $scope在模态角 js 中未定义
- CSS3 动画.css不适用于自定义模态
- 在cakepp控制器出现故障后,重定向到模态(自动打开自举模态)
- 关注引导浮动模态表单上自定义文本之后的文本区域
- 先前的状态视图不会保留在带有自定义模态url的打开UI引导模态的后台
- 信息窗口上的自定义按钮(如模态引导按钮)
- Jquery Featherlight js自定义CSS单选按钮不工作在模态窗口
- Angular UI引导模态——使用自定义模态窗口
- 创建一个自定义Jquery模态表单来上传数据
- 将额外的(自定义)参数传递给引导模态
- 使用ASP自定义设计模态框.. NET表单控件中的Bootstrap Fullcalendar
- 如何为data-toggle="modal"设置自定义单击事件处理程序按钮而不打开模态对话框
- 使用 JS 的自定义框和模态
- AngularJS自定义Twitter引导模态指令