CSS动画单向播放停止及列表项循环高亮的实现问题

嘿，我看了你遇到的问题啦——现在进度条动画到结尾会反向，而且你想让每个高亮的列表项在8秒内进度条单向填充，之后自动切换到下一项循环，对吧？咱们一步步来解决：

核心问题分析 #

你当前用transition来实现进度条高度变化，当移除progress类时，浏览器会触发反向过渡，这就是动画倒回去的原因。另外要确保只有带highlight类的项才会显示进度动画，咱们换用CSS动画来搞定这两个问题。

修改后的代码实现 #

JavaScript 部分

const items = document.querySelectorAll('.enhanced-content__animated-list-item');
let index = 0;
const totalItems = items.length;

const highlightItem = () => {
  // 移除所有项的高亮和进度类，同时重置动画状态
  items.forEach(item => {
    item.classList.remove('highlight', 'progress');
    // 强制重绘，重置动画（不然下次高亮时动画不会重新开始）
    void item.offsetHeight;
  });

  // 获取当前项并添加类
  const currentItem = items[index];
  currentItem.classList.add('highlight', 'progress');

  // 8秒后切换到下一项
  setTimeout(() => {
    index = (index + 1) % totalItems;
    highlightItem();
  }, 8000);
};

// 启动循环
highlightItem();

CSS 部分

.enhanced-content__container {
    background: #fff; /* Replace $COLOR_BACKGROUND_WHITE */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    left: 24px; /* Replace $SPACING_L */
    padding-block: 24px; /* Replace $SPACING_L */
    padding-inline: 24px; /* Replace $SPACING_L */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60%;
    margin-top: 5rem;
  }

  .enhanced-content__animated-list-item {
    flex-direction: column;
    margin-bottom: 20px;
    padding: 1rem;
    position: relative;
    text-align: left;
  }

  .enhanced-content__animated-list-item .enhanced-content__animated-list-heading,
  .enhanced-content__animated-list-item .enhanced-content__animated-list-text {
    color: #e4e4e4;
  }

  .enhanced-content__animated-list-item.highlight .enhanced-content__animated-list-heading,
  .enhanced-content__animated-list-item.highlight .enhanced-content__animated-list-text {
    color: black;
  }

  .enhanced-content__animated-list-item::before {
    background-color: #e4e4e4;
    content: '';
    height: calc(100% - 20px);
    left: 0;
    margin-top: 10px;
    position: absolute;
    top: 0;
    width: 1.5px;
  }

  .enhanced-content__animated-list-item::after {
    background-color: #007bff;
    content: '';
    height: 0;
    left: 0;
    margin-top: 10px;
    position: absolute;
    top: 0;
    width: 1.5px;
  }

  /* 用animation代替transition，实现单向不反向的进度动画 */
  .enhanced-content__animated-list-item.highlight.progress::after {
    animation: fillProgress 8s linear forwards;
  }

  @keyframes fillProgress {
    from {
      height: 0;
    }
    to {
      height: calc(100% - 20px);
    }
  }

HTML 部分（无需修改，保持原样即可）

<div class="enhanced-content">
  <div class="enhanced-content__container container">
    <h2 class="h5">heading</h2>

    <!-- Content for Desktop -->
    <div class="enhanced-content__desktop">
      <div class="enhanced-content__animated-list">
          <div class="enhanced-content__animated-list-item">
            <h3 class="enhanced-content__animated-list-heading h5">
              title 1
            </h3>
            <p class="enhanced-content__animated-list-text body-1">
            content one
            </p>
          </div>
          <div class="enhanced-content__animated-list-item">
            <h3 class="enhanced-content__animated-list-heading h5">
              title 2
            </h3>
            <p class="enhanced-content__animated-list-text body-1">
            content two
            </p>
          </div>
          <div class="enhanced-content__animated-list-item">
            <h3 class="enhanced-content__animated-list-heading h5">
              title 3
            </h3>
            <p class="enhanced-content__animated-list-text body-1">
            content three
            </p>
          </div>
          <div class="enhanced-content__animated-list-item">
            <h3 class="enhanced-content__animated-list-heading h5">
              title 4
            </h3>
            <p class="enhanced-content__animated-list-text body-1">
            content four
            </p>
          </div>
      </div>
    </div>
    </div>
  </div>

关键改动说明 #

• 替换transition为animation：定义了fillProgress动画，设置forwards填充模式，让动画结束后保持最后一帧的高度，不会反向播放。
• 限制进度动画仅在高亮项生效：把进度动画的选择器改成.enhanced-content__animated-list-item.highlight.progress::after，确保只有同时带highlight和progress类的项才会播放进度动画。
• 重置动画状态：在移除类后通过void item.offsetHeight触发元素重绘，这样下次添加progress类时，动画会重新从头开始播放，不会因为浏览器缓存动画状态而失效。

备注：内容来源于stack exchange，提问作者dustin