如何让CSS动画不自动播放，仅在点击链接触发表格内容变更时执行？

Got it, let's sort this out so your scale-up animation only runs when the table content updates via a link click, not right when the page loads. Here's a straightforward, practical solution:

Step 1: Tweak Your Initial HTML & CSS Setup #

First off, don't add the scale-up class to your table in the default HTML. If you do, the animation will fire as soon as the page renders. Keep your table element clean like this:

<table id="dynamic-table">
  <!-- Your default table content here -->
</table>

<!-- The link that triggers content updates -->
<a href="#" id="update-table-btn">Update Table</a>

Your existing CSS can stay exactly as you wrote it—we're just changing when the class gets applied to the table:

.scale-up { 
  animation: scale-up 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; 
} 

@keyframes scale-up { 
  0% { transform: scale(0.5); } 
  100% { transform: scale(1); } 
}

Step 2: Add JavaScript to Trigger Animation On Click #

We'll use JavaScript to listen for the link click, update the table content, then apply the animation class. We'll also handle repeated clicks (since CSS animations won't replay unless the class is removed and re-added):

// Grab references to our elements
const updateLink = document.getElementById('update-table-btn');
const dynamicTable = document.getElementById('dynamic-table');

updateLink.addEventListener('click', function(e) {
  e.preventDefault(); // Stop the link from reloading the page
  
  // 1. Remove the animation class if it's already there (to reset for re-trigger)
  dynamicTable.classList.remove('scale-up');
  
  // 2. Update your table content here—replace this with your actual content logic
  dynamicTable.innerHTML = `
    <tr>
      <td>Fresh Table Data 1</td>
      <td>Fresh Table Data 2</td>
    </tr>
  `;
  
  // 3. Force a browser reflow (this makes sure the class removal is registered before re-adding)
  void dynamicTable.offsetWidth;
  
  // 4. Add the animation class to trigger the scale-up effect
  dynamicTable.classList.add('scale-up');
});

Quick Breakdown of Key Parts: #

• No initial animation: By leaving the scale-up class off the table by default, the animation won't run on page load.
• Re-triggering for repeated clicks: The void dynamicTable.offsetWidth line forces the browser to recalculate the table's layout, which lets it recognize the class removal and re-addition—so the animation plays every time the link is clicked.
• Content flexibility: Swap out the innerHTML line with your actual content update code (like fetching data from an API, swapping templates, etc.).

This setup ensures your scale-up animation only fires immediately after the table content changes, exactly when the user interacts with the link.

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