Swiper中文论坛

标题: swiper嵌套，遇到嵌套内的动画第二屏不执行问题 [打印本页]

作者: Giauque 时间: 2018-3-6 16:54
标题: swiper嵌套，遇到嵌套内的动画第二屏不执行问题
使用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>

作者: westiger 时间: 2018-3-22 16:25
我也遇到了，发现当第一屏动画没有执行完就滑到第二屏，动画可以加载，说明等第一屏动画加载完第二屏其实也加载完了

作者: blove 时间: 2020-3-10 22:56
我也遇到了这样的问题，父swiper中动画执行的同时将子swiper中的动画加载完成了

作者: hyqiyf 时间: 2021-9-25 18:26
楼主这个问题解决了么？我也遇到了这个问题

作者: yafeng001 时间: 2022-2-19 20:28
我的嵌套代码

作者: yafeng001 时间: 2022-2-19 20:31
参考方案：

//外面大的 swiper初始化
const mySwiper = new Swiper ('#pageSwiper', {
   width: window.innerWidth,
   height: window.innerHeight,
   initialSlide,
   direction : 'vertical',
   effect : 'coverflow',
   lazy: {
      loadPrevNext: true,
      loadOnTransitionStart: true,
   },
   noSwiping : true,
   noSwipingClass : 'stop-swiping',
   on: {
      init: function(){
      swiperAnimateCache(this); //隐藏动画元素
      swiperAnimate(this); //初始化完成开始动画
      },
      slideChange: function(){
      if(this.activeIndex === 1) {
         swiperAnimate(gallerySwiper); // 重点部分，这样嵌入的就可以初始化完美展示动画了
      } else {
         swiperAnimate(this);
      }
      },
   }
});

// 第二页嵌入的 swiper
const gallerySwiper = new Swiper ('#gallerySwiper', {
   initialSlide: 0,
   loop : true,
   effect : 'fade',
   lazy: {
      loadPrevNext: true,
      loadOnTransitionStart: true,
   },
   nested:true,
   on:{
      slideChange: function(){
      //每个slide切换结束时也运行当前slide动画
      swiperAnimate(this);
      },
   },
   pagination: {
      el: '.gallery-pagination',
      type : 'custom',
      renderCustom: function (swiper, current, total) {
      const html = `<div class="swiper-dots">
         <span class="swiper-dot ${current === 1 && 'active'}"></span>
         <span class="swiper-dot ${current === 2 && 'active'}"></span>
         </div>`;
      return html;
      }
   }
});

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)