效果
自用的一份
addAnimationToClass函数是从别人那拿过来的，其他有的是自己写的，有的是更改的
原理
- 给每一页带动画的元素一个通用的class属性
animated-x，用来显示隐藏，比如第一页的就都是animated-1，第二页的都是animated-2 - 在swiper初始化和每次切换的时候调用添加动画的函数
- 如果有延迟的，就先让需要延迟的元素先隐藏，避免出错
注：
- 里面的动画可以自己写，这里调用的是animate.css
- swiper的css和js下载可点击此链接，任选版本下载。其他的我都是找到链接放上去的，可自行下载
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>swiper翻页时页面上有动画</title>
<link rel="stylesheet" href="./swiper.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css">
<style>
.page {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #f1f1f1;
}
.Page_swiper{
position: absolute;
top: 24px;
left: 18px;
width: 714px;
height: 1126px;
overflow: hidden;
border: 1px solid red;
font-size: 60px;
font-weight: bold;
text-align: center;
line-height: 1126px;
}
.Page_swiper_container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 有动画的元素一定要加一个animate-x的class名（x是数字，比如第一页都是1，第二页都是2），为了之后方便显示隐藏播放动画 -->
<div class="page">
<div class="Page_swiper">
<div class="Page_swiper_container">
<div class="swiper-wrapper Page_swiper_container_main">
<div class="swiper-slide pscm_Pfirst">
<div class="pscm_Pfirst_txt animated-1">第一页</div>
<div class="pscm_Pfirst_txt1 animated-1">第一页延迟文字</div>
</div>
<!-- /第一页 -->
<div class="swiper-slide pscm_Pyear">
<div class="pscm_Pyear_txt animated-2">第二页</div>
<div class="pscm_Pyear_txt1 animated-2">第二页延迟文字</div>
</div>
<!-- /第二页 -->
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./swiper.min.js"></script>
<script>
let Page_swiper = new Swiper('.Page_swiper_container', {
direction: 'vertical',
on: {
init: function() {
console.log('初始化onInit : ' + this.activeIndex);
addAnimation(this.activeIndex);
},
slideChangeTransitionStart: function() {
console.log('切换时slideChangeTransitionStart : ' + this.activeIndex);
addAnimation(this.activeIndex);
removeAnimation(this.activeIndex - 1);
removeAnimation(this.activeIndex + 1);
},
},
observer: true, //修改swiper自己或子元素时，自动初始化swiper
observeParents: true //修改swiper的父元素时，自动初始化swiper
});
//添加动画
function addAnimation(pageIndex) {
let delayTime = 100,
animatedName;
//动画还不好使的就要用到removeClass和addClass了，下面是演示，按自己的需求更改
// $(".pscm_Pfirst_txt1").removeClass("pscm_Pfirst_txt11");
// 先隐藏有延迟的元素避免穿帮
$('.pscm_Pfirst_txt1, .pscm_Pyear_txt1').css('opacity',0);
switch (pageIndex) {
case 0:
{
//动画还不好使的就要用到removeClass和addClass了，下面是演示，按自己的需求更改
// $(".pscm_Pfirst_txt1").addClass("pscm_Pfirst_txt11");
//为当页有动画的元素添加动画
$('.pscm_Pfirst_txt').addClass('animate__animated animate__slow animate__backInDown');
setTimeout(function() {
$('.pscm_Pfirst_txt1').addClass('animate__animated animate__slow animate__backInDown');
},300)
}
break;
case 1:
{
$('.pscm_Pyear_txt').addClass('animate__animated animate__slow animate__backInRight');
setTimeout(function() {
$('.pscm_Pyear_txt1').addClass('animate__animated animate__slow animate__backInRight');
},300)
}
break;
}
addAnimationToClass(pageIndex + 1, delayTime, animatedName, 1);
}
//移除动画
function removeAnimation(pageIndex) {
if (pageIndex < 0 || pageIndex > 2) {
return;
} else {
$('.animated-' + (pageIndex + 1)).hide(); //有动画的元素都加一个animate-x的class名用以显示隐藏
}
}
//对指定index页面添加动画效果,index 第几页 delayTime 延迟时间, animationName动画类型
function addAnimationToClass(index, delayTime, animationName, ) {
$('.animated-' + index).each(function(i, item) {
(
function(i) {
var timer = setTimeout(function() {
clearTimeout(timer);
$('.animated-' + index).eq(i).addClass(animationName);
setTimeout(function() {
$('.animated-' + index).eq(i).show();
}, 100);
}, delayTime * i);
}
)(i);
});
}
</script>
</html>
官方案例
- 项目都上线了，整理的时候才发现官方有个方法：链接点这里
- swiper.animate.js下载地址：https://www.swiper.com.cn/download/swiper.animate1.0.3.min.zip
原理
- 给每一个带动画的元素一个通用的class属性
ani，用来显示隐藏 - 动画名、动画运行的时间、延迟时间是写在标签里的，分别是
swiper-animate-effect,swiper-animate-duration和swiper-animate-delay - 在swiper初始化和每次切换的时候调用添加动画的函数
- 如果有延迟的，就先让需要延迟的元素先隐藏，等动画动的差不多了再将透明度调回来，避免出现露馅的问题
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>swiper翻页时页面上有动画-官方版本</title>
<link rel="stylesheet" href="./swiper.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css">
<style>
.page {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #f1f1f1;
}
.Page_swiper{
position: absolute;
top: 24px;
left: 18px;
width: 714px;
height: 1126px;
overflow: hidden;
border: 1px solid red;
font-size: 60px;
font-weight: bold;
text-align: center;
line-height: 1126px;
}
.Page_swiper_container {
width: 100%;
height: 100%;
}
.pscm_Pfirst_txt1,
.pscm_Pyear_txt1 {
position: absolute;
left: 0;
top: 30vh;
width: 100%;
height: 10vh;
line-height: 10vh;
text-align: center;
color: purple;
}
</style>
</head>
<body>
<!-- 有动画的元素一定要加一个ani的class名，为了之后方便显示隐藏播放动画 -->
<div class="page">
<div class="Page_swiper">
<div class="Page_swiper_container">
<div class="swiper-wrapper Page_swiper_container_main">
<div class="swiper-slide pscm_Pfirst">
<div class="pscm_Pfirst_txt ani" swiper-animate-effect="animate__backInDown" swiper-animate-duration="2s">第一页</div>
<div></div>
<div class="pscm_Pfirst_txt1 ani" swiper-animate-effect="animate__backInDown" swiper-animate-duration="2s" swiper-animate-delay="0.3s">第一页延迟文字</div>
</div>
<!-- /第一页 -->
<div class="swiper-slide pscm_Pyear">
<div class="pscm_Pyear_txt ani" swiper-animate-effect="animate__backInRight" swiper-animate-duration="2s">第二页</div>
<div class="pscm_Pyear_txt1 ani" swiper-animate-effect="animate__backInRight" swiper-animate-duration="2s" swiper-animate-delay="0.3s">第二页延迟文字</div>
</div>
<!-- /第二页 -->
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./swiper.min.js"></script>
<script src="./swiper.animate1.0.3.min.js"></script>
<script>
let Page_swiper = new Swiper('.Page_swiper_container', {
direction: 'vertical',
on: {
init: function(){
swiperAnimateCache(this); //隐藏动画元素
swiperAnimate(this); //初始化完成开始动画
},
slideChangeTransitionEnd: function(){
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
//this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
}
},
observer: true, //修改swiper自己或子元素时，自动初始化swiper
observeParents: true //修改swiper的父元素时，自动初始化swiper
});
</script>
</html>
注
只有延时没调整透明度的话，效果是这样的：
可以清晰的看出有延迟的文字（紫色的）会先出现并滞留一下，这时我们需要在swiper.animate.min.js里面更改一下，在swiperAnimate函数里加入下方代码：
$('.ani').css('opacity',0);
setTimeout(function(){
$('.ani').css('opacity',1);
},1000)
如下图：
具体的延时和显示的时长根据自己的需求设置就好了
这样加完效果就和第一张动图一样啦~
379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
