我找到了这个Demo,
这个演示有很好的效果,我想知道是否有人有办法应用这个演示,以便与bootstrap Modal一起使用 特别是第一个(淡入和缩放)
答案 0 :(得分:7)
以下是纯Bootstrap 4 CSS 3解决方案。
<div class="modal fade2" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
.fade2 {
transform: scale(0.9);
opacity: 0;
transition: all .2s linear;
display: block !important;
}
.fade2.show {
opacity: 1;
transform: scale(1);
}
$('#exampleModal').modal();
function afterModalTransition(e) {
e.setAttribute("style", "display: none !important;");
}
$('#exampleModal').on('hide.bs.modal', function (e) {
setTimeout( () => afterModalTransition(this), 200);
})
完整示例here。
也许它会帮助别人。
-
也谢谢@DavidDomain。
答案 1 :(得分:1)
我从w3school bootstrap model复制了模型代码并添加了以下css。此代码提供了精美的动画。你可以尝试一下。
.modal.fade .modal-dialog {
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-ms-transform: scale(0.1);
transform: scale(0.1);
top: 300px;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.modal.fade.in .modal-dialog {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transform: translate3d(0, -300px, 0);
transform: translate3d(0, -300px, 0);
opacity: 1;
}
答案 2 :(得分:0)
body{
text-align:center;
padding:50px;
}
.modal.fade{
opacity:1;
}
.modal.fade .modal-dialog {
-webkit-transform: translate(0);
-moz-transform: translate(0);
transform: translate(0);
}
.btn-black{
position:absolute;
bottom:50px;
transform:translateX(-50%);
background:#222;
padding:10px 20px;
text-transform:uppercase;
letter-spacing:1px;
font-size:14px;
font-weight:bold;
}
<div class="container">
<form class="form-inline" style="position:absolute; top:40%; left:50%; transform:translateX(-50%);">
<div class="form-group">
<label>Entrances</label>
<select class="form-control" id="entrance">
<optgroup label="Attention Seekers">
<option value="bounce">bounce</option>
<option value="flash">flash</option>
<option value="pulse">pulse</option>
<option value="rubberBand">rubberBand</option>
<option value="shake">shake</option>
<option value="swing">swing</option>
<option value="tada">tada</option>
<option value="wobble">wobble</option>
<option value="jello">jello</option>
</optgroup>
<optgroup label="Bouncing Entrances">
<option value="bounceIn" selected>bounceIn</option>
<option value="bounceInDown">bounceInDown</option>
<option value="bounceInLeft">bounceInLeft</option>
<option value="bounceInRight">bounceInRight</option>
<option value="bounceInUp">bounceInUp</option>
</optgroup>
<optgroup label="Fading Entrances">
<option value="fadeIn">fadeIn</option>
<option value="fadeInDown">fadeInDown</option>
<option value="fadeInDownBig">fadeInDownBig</option>
<option value="fadeInLeft">fadeInLeft</option>
<option value="fadeInLeftBig">fadeInLeftBig</option>
<option value="fadeInRight">fadeInRight</option>
<option value="fadeInRightBig">fadeInRightBig</option>
<option value="fadeInUp">fadeInUp</option>
<option value="fadeInUpBig">fadeInUpBig</option>
</optgroup>
<optgroup label="Flippers">
<option value="flipInX">flipInX</option>
<option value="flipInY">flipInY</option>
</optgroup>
<optgroup label="Lightspeed">
<option value="lightSpeedIn">lightSpeedIn</option>
</optgroup>
<optgroup label="Rotating Entrances">
<option value="rotateIn">rotateIn</option>
<option value="rotateInDownLeft">rotateInDownLeft</option>
<option value="rotateInDownRight">rotateInDownRight</option>
<option value="rotateInUpLeft">rotateInUpLeft</option>
<option value="rotateInUpRight">rotateInUpRight</option>
</optgroup>
<optgroup label="Sliding Entrances">
<option value="slideInUp">slideInUp</option>
<option value="slideInDown">slideInDown</option>
<option value="slideInLeft">slideInLeft</option>
<option value="slideInRight">slideInRight</option>
</optgroup>
<optgroup label="Zoom Entrances">
<option value="zoomIn">zoomIn</option>
<option value="zoomInDown">zoomInDown</option>
<option value="zoomInLeft">zoomInLeft</option>
<option value="zoomInRight">zoomInRight</option>
<option value="zoomInUp">zoomInUp</option>
</optgroup>
<optgroup label="Specials">
<option value="rollIn">rollIn</option>
</optgroup>
</select>
</div>
<div class="form-group">
<label>Exits</label>
<select class="form-control" id="exit">
<optgroup label="Attention Seekers">
<option value="bounce">bounce</option>
<option value="flash">flash</option>
<option value="pulse">pulse</option>
<option value="rubberBand">rubberBand</option>
<option value="shake">shake</option>
<option value="swing">swing</option>
<option value="tada">tada</option>
<option value="wobble">wobble</option>
<option value="jello">jello</option>
</optgroup>
<optgroup label="Bouncing Exits">
<option value="bounceOut">bounceOut</option>
<option value="bounceOutDown">bounceOutDown</option>
<option value="bounceOutLeft">bounceOutLeft</option>
<option value="bounceOutRight">bounceOutRight</option>
<option value="bounceOutUp">bounceOutUp</option>
</optgroup>
<optgroup label="Fading Exits">
<option value="fadeOut">fadeOut</option>
<option value="fadeOutDown">fadeOutDown</option>
<option value="fadeOutDownBig">fadeOutDownBig</option>
<option value="fadeOutLeft">fadeOutLeft</option>
<option value="fadeOutLeftBig">fadeOutLeftBig</option>
<option value="fadeOutRight">fadeOutRight</option>
<option value="fadeOutRightBig">fadeOutRightBig</option>
<option value="fadeOutUp">fadeOutUp</option>
<option value="fadeOutUpBig">fadeOutUpBig</option>
</optgroup>
<optgroup label="Flippers">
<option value="flipOutX" selected>flipOutX</option>
<option value="flipOutY">flipOutY</option>
</optgroup>
<optgroup label="Lightspeed">
<option value="lightSpeedOut">lightSpeedOut</option>
</optgroup>
<optgroup label="Rotating Exits">
<option value="rotateOut">rotateOut</option>
<option value="rotateOutDownLeft">rotateOutDownLeft</option>
<option value="rotateOutDownRight">rotateOutDownRight</option>
<option value="rotateOutUpLeft">rotateOutUpLeft</option>
<option value="rotateOutUpRight">rotateOutUpRight</option>
</optgroup>
<optgroup label="Sliding Exits">
<option value="slideOutUp">slideOutUp</option>
<option value="slideOutDown">slideOutDown</option>
<option value="slideOutLeft">slideOutLeft</option>
<option value="slideOutRight">slideOutRight</option>
</optgroup>
<optgroup label="Zoom Exits">
<option value="zoomOut">zoomOut</option>
<option value="zoomOutDown">zoomOutDown</option>
<option value="zoomOutLeft">zoomOutLeft</option>
<option value="zoomOutRight">zoomOutRight</option>
<option value="zoomOutUp">zoomOutUp</option>
</optgroup>
<optgroup label="Specials">
<option value="rollOut">rollOut</option>
</optgroup>
</select>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
</form>
<a class="btn btn-black " href="http://demo.nhembram.com/bootstrap-modal-animation-with-animate-css/index.html" target="_blank">View FullPage</a>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
function testAnim(x) {
$('.modal .modal-dialog').attr('class', 'modal-dialog ' + x + ' animated');
};
$('#myModal').on('show.bs.modal', function (e) {
var anim = $('#entrance').val();
testAnim(anim);
});
$('#myModal').on('hide.bs.modal', function (e) {
var anim = $('#exit').val();
testAnim(anim);
});
</script>
<style>
body{
text-align:center;
padding:50px;
}
.modal.fade{
opacity:1;
}
.modal.fade .modal-dialog {
-webkit-transform: translate(0);
-moz-transform: translate(0);
transform: translate(0);
}
.btn-black{
position:absolute;
bottom:50px;
transform:translateX(-50%);
background:#222;
padding:10px 20px;
text-transform:uppercase;
letter-spacing:1px;
font-size:14px;
font-weight:bold;
}
</style>
答案 3 :(得分:0)
使用 Animate.css 和 jquery 的模态输出效果非常简单且简短。
在HTML中:
<div class="modal fade" id="DirectorModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog bounceInDown animated"><!-- Add here Modal COME Effect "Animate.css" -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
我从以下{@ {3}}
处获得下面的jquery代码我将其修改为常规使用。
jquery代码:
<script>
$(document).ready(function () {
// BS MODAL OPEN CLOSE EFFECT ---------------------------------
var timeoutHandler = null;
$('.modal').on('hide.bs.modal', function (e) {
var anim = $('.modal-dialog').removeClass('bounceInDown').addClass('fadeOutDownBig'); // Model Come class Remove & Out effect class add
if (timeoutHandler) clearTimeout(timeoutHandler);
timeoutHandler = setTimeout(function() {
$('.modal-dialog').removeClass('fadeOutDownBig').addClass('bounceInDown'); // Model Out class Remove & Come effect class add
}, 500); // some delay for complete Animation
});
});
</script>
答案 4 :(得分:0)
.custom-modal-header
{
display: block;
}
.custom-modal .modal-content
{
width:500px;
border: none;
}
.custom-modal
{
display: block !important;
}
.custom-fade .modal-dialog {
transform: translateY(4%);
opacity: 0;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
will-change: transform;
}
.custom-fade.in .modal-dialog {
opacity: 1;
transform: translateY(0%);
}
<div class="modal custom-modal custom-fade" tabindex="-1" role="dialog"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Title</h5>
</div>
<div class="modal-body">
<p>My cat is dope.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Sure (Meow)</button>
</div>
</div>
</div>
</div>
答案 5 :(得分:-1)
riot.js解决方案:
我的riot.js示例将动画模式标记嵌套在订单个人资料标记内。
注意,这假定jquery和riot.js之前已加载。
动画模式标记内容:
<a id='{ opts.el }' href="" class='pull-right'>edit</a>
<div class="modal animated" id="{ opts.el }-modal" tabindex="-1" role="dialog" aria-labelledby="animatedModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button onclick={ cancelForm } id='{ opts.el }-cancel-1' type="button" class="close" ><span>×</span></button>
<h4 class="modal-title" id="animatedModal">{ opts.title }</h4>
</div>
<div class="modal-body">
<yield/>
</div>
<div class="modal-footer">
<button onclick={ cancelForm } id='{ opts.el }-cancel-2' onclick={ cancelForm } type="button" class="btn btn-default">Close</button>
<button onclick={ saveForm } type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
var self = this
self.modalBtn = `#${opts.el}`
self.modal = `#${opts.el}-modal`
self.animateInClass = opts.animatein || 'fadeIn'
self.animateOutClass = opts.animateout || 'fadeOut'
self.closeModalBtn = `#${ opts.el }-cancel-1, #${ opts.el }-cancel-2`
self.animationsStr = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'
this.on('mount',function(){
self.initModal()
self.update()
})
this.initModal = function(){
modal = $(self.modal)
modalBtn = $(self.modalBtn)
closeModalBtn = `#${ opts.el }-cancel-1`
modalBtn.click(function(){
$(self.modal).addClass(self.animateInClass)
$(self.modal).modal('show')
})
$(self.modal).on('show.bs.modal',function(){
$(self.closeModalBtn).one('click',function(){
$(self.modal).removeClass(self.animateInClass).addClass(self.animateOutClass)
$(self.modal).on(self.animationsStr,function(){
$(self.modal).modal('hide')
})
})
})
$(self.modal).on('hidden.bs.modal',function(evt){
$(self.modal).removeClass(self.animateOutClass)
$(self.modal).off(self.animationsStr)
$(self.closeModalBtn).off('click')
})
}
this.cancelForm = function(e){
this.parent.cancelForm()
}
this.showEdit = function(e){
this.parent.showEdit()
}
this.saveForm = function(e){
this.parent.saveForm()
}
dashboard_v2.bus.on('closeModal',function(){
try{
$(`#${ opts.el }-cancel-1`).trigger('click')
}catch(e){}
})
</script>
要嵌套的个人资料标记:
个人资料标记内容:
<div class="row">
<div class="col-md-12">
<div class="eshop-product-body">
<animated-modal>
title='Order Edit'
el='order-modal-1'>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form id='profile-form'>
<div class="form-group">
<label>Organization</label>
<input id='organization' type="text" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label>Contact</label>
<input id='contact' type="text" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label>Phone</label>
<input id='phone' type="text" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label>Email</label>
<input id='email' type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
</form>
</div>
</div>
</animated-modal>
<h3>Profile</h3>
<ul class='profile-list'>
<li>Organization: { opts.data.profile.organization }</li>
<li>Contact: { opts.data.profile.contact_full_name }</li>
<li>Phone: { opts.data.profile.phone_number }</li>
<li>Email: { opts.data.profile.email }</li>
</ul>
</div>
</div>
</div>
<script>
var self = this
this.on('mount',function(){
})
this.cancelForm = function(e){
}
this.showEdit = function(e){
}
this.saveForm = function(e){
}
</script>