下面就是一份实现类bootstrap模态框动画的攻略：
1. 准备工作
在开始实现之前，我们需要做一些准备工作。首先是引入必要的框架和库：
- jQuery：用于绑定事件和操作DOM；
- animate.css：用于提供动画效果。
在HTML文件中，需要引入bootstrap的CSS和JS文件，以及上面提到的jQuery和animate.css文件。同时，在body元素内部创建一个div用于显示模态框，例如：
<body>
<!-- 模态框容器 -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
Modal body..
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- 引入所需的库和框架 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</body>
2. 实现动画效果
2.1 初步实现
首先，我们需要绑定模态框的显示和隐藏事件，以实现动画效果。基本的代码如下：
$(document).ready(function() {
// 模态框显示时的动画效果
$('.modal').on('show.bs.modal', function(e) {
$(this).removeClass('fadeOut').addClass('animated zoomIn');
});
// 模态框隐藏时的动画效果
$('.modal').on('hide.bs.modal', function(e) {
$(this).addClass('fadeOut').removeClass('zoomIn');
});
});
上述代码中，我们使用了show.bs.modal和hide.bs.modal这两个事件来分别实现模态框显示和隐藏时的动画效果。其中，fadeIn和fadeOut是animate.css提供的动画类。
2.2 实现多种动画效果
除了zoomIn和fadeOut之外，animate.css还提供了很多其他的动画类。我们可以通过修改上面代码中的zoomIn和fadeOut，来实现不同种类的动画效果。
例如，如果我们想要实现模态框从底部弹出的效果，可以使用bounceInUp和bounceOutDown这两个动画类。具体的实现代码如下：
$(document).ready(function() {
// 模态框显示时的动画效果
$('.modal').on('show.bs.modal', function(e) {
$(this).removeClass('bounceOutDown').addClass('animated bounceInUp');
});
// 模态框隐藏时的动画效果
$('.modal').on('hide.bs.modal', function(e) {
$(this).addClass('bounceOutDown').removeClass('bounceInUp');
});
});
同时，我们也可以定义多种动画效果，并实现根据不同情况使用不同动画的逻辑。例如，在点击模态框的不同按钮时，我们可以来使用不同的动画效果。具体代码如下：
$(document).ready(function() {
// 模态框显示时的动画效果
$('.modal').on('show.bs.modal', function(e) {
var effect = $(this).data('animation');
$(this).removeClass('animated').addClass('animated ' + effect);
});
// 模态框隐藏时的动画效果
$('.modal').on('hide.bs.modal', function(e) {
$(this).removeClass('animated').removeClass($(this).data('animation'));
});
// 不同按钮使用不同动画效果
$('#btnZoomIn').on('click', function(e) {
$('#myModal').data('animation', 'zoomIn').modal('show');
});
$('#btnBounceInUp').on('click', function(e) {
$('#myModal').data('animation', 'bounceInUp').modal('show');
});
});
在上述代码中，我们在打开模态框时，根据模态框上的data-animation属性来判断应该使用哪种动画效果。同时，我们也定义了两个按钮的点击事件，并分别使用不同的动画效果来打开模态框。
3. 示例
下面是两个简单的示例，分别演示zoomIn和bounceInUp两种动画效果。你可以将下列代码保存为一个HTML文件，并在浏览器中打开，来查看它们的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modal animation demo</title>
<!-- 引入必要的库和框架 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<style>
.modal .modal-dialog {
width: 80%;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="container">
<h1>Modal animation demo</h1>
<hr>
<div class="row">
<div class="col-md-6">
<!-- 模态框1：zoomIn -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal1">ZoomIn</button>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-animation="zoomIn">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">ZoomIn</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>I am showing up with slide-in animation from the bottom of the page. This animation is done using CSS3 transitions.\nYou can simply use whatever transition you'd like from the animate.css library.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<!-- 模态框2：bounceInUp -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal2">BounceInUp</button>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-animation="bounceInUp">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">BounceInUp</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>I am showing up with slide-in animation from the bottom of the page. This animation is done using CSS3 transitions.\nYou can simply use whatever transition you'd like from the animate.css library.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 绑定模态框显示和隐藏事件 -->
<script>
$(document).ready(function() {
// 模态框显示时的动画效果
$('.modal').on('show.bs.modal', function(e) {
var effect = $(this).data('animation');
$(this).removeClass('animated').addClass('animated ' + effect);
});
// 模态框隐藏时的动画效果
$('.modal').on('hide.bs.modal', function(e) {
$(this).removeClass('animated').removeClass($(this).data('animation'));
});
});
</script>
</body>
</html>
上面的代码中，我们在两个按钮上分别添加了data-animation属性并设置了初始值，用于在点击按钮时打开不同的动画效果的模态框。同时，我们也在页面底部的script标签中，绑定了show.bs.modal和hide.bs.modal这两个事件，以实现动画效果。
运行代码后，点击按钮可以分别查看zoomIn和bounceInUp两种动画效果的模态框。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现类bootstrap模态框动画 - Python技术站
微信扫一扫 
支付宝扫一扫 