CSS 动画只能前进和停止。目前它又回来了并且泡沫

Question

我正在尝试完成这项工作，以便如果该项目突出显示（即具有突出显示的类），则只有一个伪元素显示“进度”。

目前，动画正确地向前移动，但一旦到达末尾，动画就会反转。

每个项目应突出显示 8 秒，在此期间进度条应从上到下填充。之后，突出显示应移至下一个项目。此行为应连续循环所有项目。

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

  const highlightItem = () => {
    // Remove 'highlight' and 'progress' classes from all items
    items.forEach(item => {
      item.classList.remove('highlight', 'progress');
    });

    // Get the current item
    const currentItem = items[index];

    // Add 'highlight' and 'progress' classes to the current item
    currentItem.classList.add('highlight', 'progress');

    // After 8 seconds, move to the next item
    setTimeout(() => {
      index = (index + 1) % totalItems;
      highlightItem();
    }, 8000);
  };

  // Start the cycle
  highlightItem();

.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;
    position: absolute;
    top: 0;
    transition: height 8s linear;
    width: 1.5px;
  }

  .enhanced-content__animated-list-item.progress::after {
    height: calc(100% - 20px);
  }
}

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

Answer 1

您遇到的问题是由于转换行为：它是可逆的，因此当您删除导致更改的类时，它会以相同的速度（缓慢地）恢复状态。

我建议您使用

animation

代替。它具有属性

forward

，因此在删除

progress

类后，它可以保持更改而不自行反转。

@keyframes progress-bar {
  0% {
    height: 0;
  }
  98% {
    height: calc(100% - 20px);    
  }
  100% {
    height: 0;
  }
}

  .enhanced-content__animated-list-item.highlight::after {
    animation: progress-bar 8s linear forwards;
}

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

  const highlightItem = () => {
    // Remove 'highlight' and 'progress' classes from all items
    items.forEach(item => {
      item.classList.remove('highlight', 'progress');
    });

    // Get the current item
    const currentItem = items[index];

    // Add 'highlight' and 'progress' classes to the current item
    currentItem.classList.add('highlight', 'progress');

    // After 8 seconds, move to the next item
    setTimeout(() => {
      index = (index + 1) % totalItems;
      highlightItem();
    }, 8000);
  };

  // Start the cycle
  highlightItem();

.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;
    position: absolute;
    top: 0;
    width: 1.5px;
  }

/* Animation for progress bar filling */
@keyframes progress-bar {
  0% {
    height: 0;
  }
  98% {
    height: calc(100% - 20px);    
  }
  100% {
    height: 0;
  }
}

  .enhanced-content__animated-list-item.highlight::after {
    animation: progress-bar 8s linear forwards;
}

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