TA的每日心情 | 奋斗 2017-6-6 09:42 |
---|
签到天数: 1 天 [LV.1]初来乍到
注册会员
- 积分
- 77
|
使用swiper做垂直切换,每屏都增加了动画,在其中一屏插入水平切换,并且每屏也都是有动画,现在遇到这么个问题:
垂直切换动画无问题,当切换到水平swiper的时候,水平动画第一屏动画正常显示,横滑切换到第二个画面,动画消失,直接fade出现的。第三屏正常。然后向下切换后在回来,又出现该问题了。
html如下:
<div class="swiper-container swiper-container-h">
<div class="swiper-wrapper">
<section class="swiper-slide">1</section>
<section class="swiper-slide">
<div class="swiper-container swiper-container-v">
<div class="swiper-wrapper">
<section class="swiper-slide"><div class="pro_tit font_hei ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s" swiper-animate-delay="0.3s">动画A</div></section>
<section class="swiper-slide"><div class="pro_tit font_hei ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s" swiper-animate-delay="0.3s">动画B</div></section>
<section class="swiper-slide"><div class="pro_tit font_hei ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s" swiper-animate-delay="0.3s">动画C</div></section>
</div>
</div>
</section>
<section class="swiper-slide">3</section>
</div>
</div>
js代码如下:
<script type="text/javascript">
var swiperH = new Swiper('.swiper-container-h',{
on:{
init: function(){
swiperAnimateCache(this);
swiperAnimate(this);
},
slideChangeTransitionEnd: function(){
swiperAnimate(this);
}
},
direction:"vertical",
navigation:{
nextEl:'.nextPage',
},
effect : 'fade',
});
var swiperV = new Swiper('.swiper-container-v', {
on:{
init: function(){
swiperAnimateCache(this);
swiperAnimate(this);
},
slideChangeTransitionEnd: function(){
swiperAnimate(this);
}
},
pagination: {
el: '.swiper-pagination-v',
},
effect : 'fade',
});
</script>
|
|