javascript - 再次显示后加载点动画失真

Question

我正在使用 TweenMax（gasp 的旧版本）为简单的加载点设置动画：

function hideDots(){
    const dots = document.querySelector('.dotContainer');
    dots.style.opacity = 0; 
    dots.addEventListener('transitionend', hideDotsAnime);
    function hideDotsAnime() {
        dots.style.display = "none";
        dots.removeEventListener("transitionend", hideDotsAnime);
    }
}

function showDots(){
    TweenMax.staggerTo(".dots",2,{x:220,backgroundColor:'white',repeat:-1,ease:SlowMo.ease.config(0.5,0.4,false)},0.4);
    TweenMax.staggerFrom(".dots",2,{opacity:0,scale:0.7,repeat:-1,ease:SlowMo.ease.config(0.5,0.4,true)},0.4);
    const dots = document.querySelector('.dotContainer');
    dots.style.display = "block";
    setTimeout(() => dots.style.opacity = 0.75, 200);
}

setTimeout(() => showDots(), 2500);

setTimeout(() => hideDots(), 5900);

setTimeout(() => showDots(), 10000);

body{
            background-color: black
}
.dotContainer {
          background-color: transparent;
          position: absolute;
          top: 60vh;
          left: 42vw;
          transform: translate(-50%,-50%);
          display: none;
          transition: all 0.5s linear;
          z-index: 11;
}
.dots {
          position: absolute;
          width: 1em;
          height: 1em;
          border-radius: 50%;
          background-color: #e2daeb;
          opacity: 0.8;
}

<script SRC="https://langfox.ir/english/TweenMax.min.js" TYPE="text/javascript"></script>

<div class="dotContainer">
<div class="dots"></div>
<div class="dots"></div>
<div class="dots"></div>
<div class="dots"></div>
<div class="dots"></div>
</div>

正如您第一次看到的那样，显示和隐藏这些点效果很好。但问题是，当我们再次显示这些点时，会发生失真，并且我们不再拥有那些精美的动画点，现在它们彼此关闭并且......

我怎样才能解决这个问题？

标签： javascripthtmlcssgsap