swiper 在vue中切换中动画重新加载问题

原文：https://blog.csdn.net/weixin_43153309/article/details/83314112

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43153309/article/details/83314112
swiper 在vue中切换中动画重新加载问题
问题：h5页面有9页，使用animate.css 给页面做动态效果，用swiper翻页后9页的动画已经执行结束了，当滑动到第9页时候没有动画效果
思路：使用display属性把div未在当前swiper页面的元素隐藏不执行动画，当swiper滑动到当前页面时候block显示div执行动画

—添加css
<style>
.nopage{display: none;}
.showpage{display: block;}
</style>

–动画div样式

<swiper :options="swiperOption">
<swiper-slide>
<div class="birthday item" index="13"> --第一页动画 </div>
</swiper-slide>
<swiper-slide>
<div class="birthday item" index="13"> --第二页动画 </div>
</swiper-slide>
</swiper>
1
2
3
4
5
6
7
8
npm install vue-awesome-swiper@3.1.3 --save-dev
npm install jquery@3.3.1 --save-dev
import $ from 'jquery'

--test.vue中引入

import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
data(){
return{
musicPlay:false,
date:yl.getNlDate().split(" ")[1],
swiperOption:{
direction: 'vertical', //上下翻页
height:window.innerHeight,
on: {
slideChangeTransitionStart: function(e){
$(".swiper-slide-active").find('.item').removeClass('nopage').addClass('showpage')
$(".swiper-slide-prev,.swiper-slide-next").find('.item').removeClass('showpage').addClass('nopage')
},
}
}
}
},
beforeCreate:function () {
document.title = "生日快乐";
},
mounted:function () {
$(".swiper-slide-prev,.swiper-slide-next").find('.item').removeClass('showpage').addClass('nopage')
},
name: 'birthday1',
components:{
swiper, swiperSlide
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
文章最后发布于: 2018-10-23 20:18:55
————————————————
版权声明：本文为CSDN博主「A 糖醋排骨」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43153309/article/details/83314112