请求协助实现计数器加1及数字上滑动画脚本（附已完成代码）

Got it! Let's turn your static counter into an interactive one with that smooth slide-up animation when the number increments. Here's how to extend your existing code step by step:

Step 1: Tweak the HTML Structure #

We’ll adjust each number container to support animating both the old and new digit. Each list item will hold two spans (current and upcoming number) so we can slide the old value out and the new one in seamlessly:

<div class="countdown-container">
  <ul id="order-list" class="order-list">
    <li class="order-list-item">
      <span class="current-digit">0</span>
      <span class="next-digit">0</span>
    </li>
    <li class="order-list-item" style="border-left: 1px solid black;">
      <span class="current-digit">0</span>
      <span class="next-digit">0</span>
    </li>
    <li class="order-list-item" style="border-left: 1px solid black; border-right: 1px solid black;">
      <span class="current-digit">8</span>
      <span class="next-digit">8</span>
    </li>
    <li class="order-list-item">
      <span class="current-digit">1</span>
      <span class="next-digit">1</span>
    </li>
  </ul>
</div>
<!-- Add a test button to trigger increments -->
<button onclick="incrementCounter()">Increment</button>

Step 2: Update CSS with Animation Keyframes #

We’ll add relative positioning to contain the absolute-positioned digits, plus define slide-up animations for the outgoing and incoming values:

.booking-wrapper .countdown-wrapper .countdown-container .order-list { 
  border: 5px solid #959595; 
  list-style-type: none; 
  padding-left: 0; 
  margin-bottom: 0; 
  overflow: hidden; 
  line-height: 1; 
  height: 56px; 
  margin-top: 8px; 
}

.booking-wrapper .countdown-wrapper .countdown-container .order-list .order-list-item { 
  display: inline-block; /* Switch to inline-block to support positioning */
  position: relative;
  font-size: 40px; 
  font-weight: bold; 
  padding: 0 15px; 
  height: 56px;
  overflow: hidden; /* Hide digits mid-animation */
}

/* Style both digit spans */
.order-list-item .current-digit,
.order-list-item .next-digit {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease-in-out;
}

/* Next digit starts off-screen below */
.order-list-item .next-digit {
  top: 100%;
}

/* Animation classes for sliding */
.slide-out-up {
  transform: translateX(-50%) translateY(-100%);
}

.slide-in-up {
  transform: translateX(-50%) translateY(0);
}

Step 3: Write the JavaScript Increment Logic #

This function handles the number increment, manages carry-over for rolling digits (like 9→0), and triggers the slide animation for each updated digit:

function incrementCounter() {
  const listItems = document.querySelectorAll('#order-list .order-list-item');
  // Convert current digits to an array (e.g., ["0", "0", "8", "1"])
  const currentDigits = Array.from(listItems).map(item => item.querySelector('.current-digit').textContent);
  
  let carry = 1; // Start with +1 increment
  const updatedDigits = [...currentDigits];
  
  // Iterate from right to left to handle carry-over
  for (let i = updatedDigits.length - 1; i >= 0 && carry; i--) {
    let newDigit = parseInt(updatedDigits[i]) + carry;
    if (newDigit === 10) {
      newDigit = 0;
      carry = 1;
    } else {
      carry = 0;
    }
    updatedDigits[i] = newDigit.toString();
    
    // Trigger animation for this digit
    const item = listItems[i];
    const currentSpan = item.querySelector('.current-digit');
    const nextSpan = item.querySelector('.next-digit');
    
    nextSpan.textContent = updatedDigits[i];
    // Add animation classes
    currentSpan.classList.add('slide-out-up');
    nextSpan.classList.add('slide-in-up');
    
    // Reset spans after animation completes
    setTimeout(() => {
      currentSpan.textContent = updatedDigits[i];
      currentSpan.classList.remove('slide-out-up');
      nextSpan.classList.remove('slide-in-up');
    }, 300); // Match the transition duration from CSS
  }
  
  // If carry remains after all digits, add a new leading digit
  if (carry) {
    const newLi = document.createElement('li');
    newLi.className = 'order-list-item';
    newLi.style.borderRight = '1px solid black';
    newLi.innerHTML = '<span class="current-digit">1</span><span class="next-digit">1</span>';
    listItems[0].parentNode.insertBefore(newLi, listItems[0]);
  }
}

How It All Comes Together #

• Clicking the increment button starts from the rightmost digit, adds 1, and handles carry-over (e.g., turning 9 into 0 and passing the carry to the next digit).
• For each changing digit, the current value slides up out of view while the new value slides up into place.
• After the animation finishes, the current digit is updated, and the spans reset for the next increment.
• If all digits roll over (like 999→1000), a new leading digit is automatically added to the start of the list.

内容的提问来源于stack exchange，提问作者Angelica