javascript - 带有 setTimeout 延迟无限循环的 Vanilla Javascript 信息代码

Question

我正在尝试使用纯粹的 vanilla JS（没有 jQuery 等）来显示信息代码。

我有一个<div class="postcode-panel"></div>带有一些文字的 div：

XXX 的最新信息- 这将显示 3 秒

然后这个 div 淡出视图并显示下一个 div<div class="rating-panel"></div>并带有以下文字：

等级 5.4 - 这将显示 15 秒。

一旦 div.rating-panel被查看了 15 秒，那么第一个 div.postcode-panel然后循环返回并显示 3 秒，然后无限循环。我正在使用 CSS 控制淡出动画，但我很难让所有不同的超时都在 JS 中工作。

---

更新：我已经设法更新我的代码以显示和隐藏代码，但我无法在正确的时间里得到它。

这是一个JS Fiddle。

下面是我的代码

function postcode () {
        var postcodePanel = document.querySelector(".postcode-panel");
        var ratingPanel = document.querySelector(".rating-panel");
        var activeClass = 'active';

        function start() {

            setTimeout(function() {
                

                setTimeout(function(){
                    postcodePanel.classList.remove(activeClass);
                    ratingPanel.classList.add(activeClass);
                }, 3000);
                
                setTimeout(function(){
                    start();
                }, 15000);
                postcodePanel.classList.add(activeClass);
                ratingPanel.classList.remove(activeClass);
                
            },100);
        }

        start();
    }
    window.addEventListener('load', postcode);

.info-panel {
    position:relative;
    background:blue;
    color:white;
    padding:20px;
    font-size:20px;
}


.postcode-panel {
    display:block;
    position:absolute;
    opacity: 0;
}

.postcode-panel.active {
    animation:ticker-pc 3s ;
}

.rating-panel {
    opacity: 0;
}

.rating-panel.active {
    animation:ticker-rr 12s ;
}

@keyframes ticker-pc {
    0% {
        opacity: 0;
        -webkit-transform:translateY(30px);
        transform:translateY(30px);
    }

    10% {
        opacity: 1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }
    50% {
        opacity: 1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }

    90% {
        opacity: 1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform:translateY(-30px);
        transform:translateY(-30px);
    }
}

@keyframes ticker-rr {
    0% {
        opacity: 0;
        -webkit-transform:translateY(30px);
        transform:translateY(30px);
    }

    2% {
        opacity: 1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }
    50% {
        opacity: 1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }

    97% {
        opacity: 1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform:translateY(-30px);
        transform:translateY(-30px);
    }
}

<div class="info-panel">
  <div class="postcode-panel active">
    <span class="latest-info">
      Latest information for
      <span class="postcode-info">
        XXX
      </span>
    </span>
  </div>
  <div class="rating-panel">
    <span class="rating">
      Rating <span class="score">5.4</span>
    </span>
  </div>
</div>

标签： javascripthtmlsettimeouttiming

Answer 1

您不需要为此专门使用 JavaScript。您可以像现在一样有两个动画，但都持续 18 秒，并设置百分比，以便相关文本显示 3 秒或 15 秒。

您可以通过关键帧获得很多精细控制，并且您可能希望使用百分比来获得您想要的确切内容，但是不需要 JS 来运行您的动画，您应该会发现用户的 GPU 已被调用并为您完成工作。

    .info-panel {
        position:relative;
        background:blue;
        color:white;
        padding:20px;
        font-size:20px;
    }


    .postcode-panel {
        display:block;
        position:absolute;
        opacity: 0;
        animation:ticker-pc 18s infinite;
        animation-fill-mode: forwards;
    }

    .rating-panel {
        opacity: 0;
        animation:ticker-rr 18s infinite;
        animation-fill-mode: forwards;
    }

    @keyframes ticker-pc {
        0% {
            opacity: 0;
            -webkit-transform:translateY(30px);
            transform:translateY(30px);
        }
        
        1.66666% {/* gets into view at full opacity after 0.3seconds */
            opacity: 1;
            -webkit-transform:translateY(0);
            transform:translateY(0);
         }
         16.66666% {/* stays there for 3 seconds - 0.3 seconds */
            opacity: 1;
            -webkit-transform:translateY(0);
            transform:translateY(0);
         }

        18.33332% {/* goes out at the top and fades away after 0.3 seconds */
            opacity: 0;
            -webkit-transform:translateY(-30px);
            transform:translateY(-30px);
        }

        100% {
            opacity: 0;
            -webkit-transform:translateY(-30px);
            transform:translateY(-30px);
        }
    }

    @keyframes ticker-rr {
        0% {
            opacity: 0;
            -webkit-transform:translateY(30px);
            transform:translateY(30px);
        }

        16.6667% { /* wait for 3 seconds */
            opacity: 0;
            -webkit-transform:translateY(30px);
            transform:translateY(30px);
        }
        18.33332% {/* get into view at full opacity after 0.3seconds */
            opacity: 1;
            -webkit-transform:translateY(0);
            transform:translateY(0);
         }
        98.33334% {/* stay in full view for rest of time -0.3 seconds */
            opacity: 1;
            -webkit-transform:translateY(0);
            transform:translateY(0);
        }
        
        100% {
            opacity: 0;
            -webkit-transform:translateY(-30px);
            transform:translateY(-30px);
        }
    }

<div class="info-panel">
    <div class="postcode-panel">
        <span class="latest-info">
          Latest information for
          <span class="postcode-info">
            XXX
          </span>
        </span>
      </div>
      <div class="rating-panel">
        <span class="rating">
          Rating <span class="score">5.4</span>
        </span>
      </div>
    </div>