swiper 在vue中切换中动画重新加载问题
swiper 在vue中切换中动画重新加载问题问题:h5页面有9页,使用animate.css 给页面做动态效果,用swiper翻页后9页的动画已经执行结束了,当滑动到第9页时候没有动画效果思路:使用display属性把div未在当前swiper页面的元素隐藏不执行动画,当swiper滑动到当前页面时候block显示div执行动画—添加css<style>.nopage
·
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>
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条内容
所有评论(0)