TweenMax中的进度条

Question

我正在观看此https://codepen.io/alexandrebuffet/pen/wYvEGK

[开始时，进度条应仅在“活动”中。如果您看第一，第二和第三，一切正常。但是，当您第二次观看2º幻灯片时，1º幻灯片进度栏也将同时工作。

为什么？

// Animate pagination
      this.DOM.paginationItemsLoader = paginationEl.querySelectorAll('.pagination-separator-loader');
      this.DOM.activePaginationItem = paginationEl.querySelector('.slideshow-pagination-item.active');
      this.DOM.activePaginationItemLoader = this.DOM.activePaginationItem.querySelector('.pagination-separator-loader');

      console.log(swiper.pagination);
      // console.log(swiper.activeIndex);

      // Reset and animate
        TweenMax.set(this.DOM.paginationItemsLoader, {scaleX: 0});
        TweenMax.to(this.DOM.activePaginationItemLoader, this.config.slideshow.pagination.duration, {
          startAt: {scaleX: 0},
          scaleX: 1,
        });


    }

}

const slideshow = new Slideshow(document.querySelector('.slideshow'));

Answer 1

您可以将console.log()放在animatePagination函数内部，然后在第二次运行中看到该函数每次被调用两次。解决该问题，它将解决您的问题。