swiper嵌套，遇到嵌套内的动画第二屏不执行问题

Giauque

使用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

我也遇到了，发现当第一屏动画没有执行完就滑到第二屏，动画可以加载，说明等第一屏动画加载完第二屏其实也加载完了

blove

我也遇到了这样的问题，父swiper中动画执行的同时将子swiper中的动画加载完成了

hyqiyf

楼主这个问题解决了么？我也遇到了这个问题

yafeng001

我的嵌套代码

yafeng001

参考方案：

//外面大的 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;
        }
      }
    });