修复CSS文本替换动画中容器跳动及尺寸异常问题

Got it, let's tackle that annoying jump and layout shift you're seeing with your text animation! The main issues here are how your animated elements interact with the document flow and incorrect positioning properties in your keyframes. Here's how to fix it step by step:

What's Causing the Problem? #

• Your p elements use the default static position, so top/bottom in your keyframes don't actually work—instead, the browser adjusts their layout as font size changes, making the container jump.
• When adding the new text element, both old and new text occupy the document flow at the same time, temporarily increasing the container's height and shifting the image below.

Modified Solution Code #

Updated CSS #

body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#vert-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
#centerTextContainer {
  font-size: 16px;
  text-align: center;
  margin: 10px;
  width: 100%; /* Ensure container spans full width for centered text */
  position: relative; /* Make this a positioning context for absolute children */
  min-height: 37px; /* Keep fixed height to prevent layout shift */
}
/* Style all text elements in the container */
#centerTextContainer p {
  position: absolute; /* Take elements out of document flow */
  top: 0;
  left: 0;
  width: 100%; /* Ensure full width for proper centering */
  margin: 0; /* Remove default p margin to avoid extra space */
}
#img-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 50vw;
}
#links-container img {
  margin: 5px;
}
@keyframes fade-out {
  from { 
    transform: translateY(0); /* Use transform for smoother animation */
    opacity: 1;
    font-size: 16px;
  }
  to { 
    transform: translateY(-25px); /* Slide up instead of using bottom */
    opacity: 0;
    font-size: 4px;
  }
}
@keyframes fade-in {
  from { 
    transform: translateY(25px); /* Slide down from below */
    opacity: 0;
    font-size: 4px;
  }
  to { 
    transform: translateY(0);
    opacity: 1;
    font-size: 16px;
  }
}
.fadingout {
  animation-name: fade-out;
  animation-duration: 500ms;
  animation-fill-mode: forwards;
}
.fadingin {
  animation-name: fade-in;
  animation-duration: 500ms;
  animation-fill-mode: forwards; /* Keep final state after animation */
}

Fixed JavaScript #

function textboxWriteAnimated(str) {
  const newText = document.createElement('p');
  const currentText = document.getElementById("centerText");
  const textContainer = document.getElementById("centerTextContainer");
  
  newText.className = "fadingin";
  newText.innerHTML = str;
  newText.id = "centerText";
  
  // Fix: Pass class name as string, not array
  currentText.classList.add("fadingout");
  textContainer.appendChild(newText);
  
  setTimeout(() => {
    textContainer.removeChild(currentText);
    // Remove fadingin class to reset for future animations
    document.getElementById("centerText").classList.remove("fadingin");
  }, 500);
}

setTimeout(() => {
  textboxWriteAnimated("Does it work?");
  setTimeout(() => {
    textboxWriteAnimated(":(");
  }, 1500);
}, 1000);

Key Changes Explained #

1. Absolute Positioning for Text Elements:

   • Setting #centerTextContainer p to position: absolute takes text out of the normal document flow. Old and new text won't stack up to change the container's height, so the image below stays put.
   • #centerTextContainer uses position: relative to contain the absolute-positioned text within its bounds.

2. Using transform Instead of top/bottom:

   • transform is hardware-accelerated, making animations smoother, and doesn't trigger layout recalculations that cause jumps.

3. Fixed Container Height:

   • Keeping min-height: 37px ensures the container's size never changes, even during animations.

4. Fixed Class List Syntax:

   • You had currentText.classList.add(["fadingout"])—classList.add expects strings, not arrays, which was causing the fade-out class to misbehave in some browsers.

Now your text should slide in/out smoothly without any container jumping or image shifting!

内容的提问来源于stack exchange，提问作者Beckett O'Brien