Gatsby中实现单字母悬停动画：行断与空格兼容问题求助

我之前也踩过类似的坑——拆分字母做独立动画时，要么动画失效，要么排版彻底乱掉，尤其是响应式场景下的单词换行问题。给你分享一个亲测有效的方案，核心思路是按单词分组，让单词成为换行的最小单元，同时保留每个字母的独立动画效果：

第一步：重构文本拆分逻辑 #

先把整个文本按「单词+空格」拆分，这样每个单词会被当成一个独立容器，浏览器只会在单词之间换行，不会把单词拆成单个字母。修改你的IntroText.js：

export default function IntroText({ children }) {
  // 用正则拆分，保留空格作为独立元素，避免空格丢失或折叠异常
  const textSegments = children.split(/(\s+)/);

  return (
    <div>
      <p className='intro-text'>
        {textSegments.map((segment, idx) => {
          // 处理空格段：直接渲染，不需要拆分字母
          if (segment.trim() === '') {
            return <span key={idx} className="word-space">{segment}</span>;
          }
          // 处理单词段：拆分每个字母，包裹在单词容器里
          return (
            <span key={idx} className="word-container">
              {segment.split('').map((char, charIdx) => (
                <IntroLetter key={`${idx}-${charIdx}`} char={char} />
              ))}
            </span>
          );
        })}
      </p>
    </div>
  );
}

第二步：简化字母组件 #

现在不用单独处理空格了，IntroLetter.js可以大幅简化——甚至不用React状态，直接用CSS :hover伪类实现交互，代码更简洁高效：

export default function IntroLetter({ char }) {
  return <span className='single-letter'>{char}</span>;
}

第三步：调整CSS样式 #

重点是让单词容器保持整体，字母用inline-block保证动画生效，同时用动画实现弹跳效果：

.intro-text {
  width: 80%;
  /* 保持浏览器原生的文本换行规则 */
  white-space: normal;

  .word-container {
    /* 让单词作为整体，换行时不会被拆分 */
    display: inline-block;
  }

  .word-space {
    /* 空格用普通inline渲染，保留原生文本的空格排版逻辑 */
    display: inline;
  }

  .single-letter {
    display: inline-block;
    transform-origin: 50% 84%;
    /* 基础过渡保证动画顺滑 */
    transition: transform 0.1s linear;
  }

  .single-letter:hover {
    /* 弹跳动画：先放大到1.3倍，再回落至1.2倍，模拟弹跳感 */
    animation: bounce-stretch 0.15s linear forwards;
  }

  /* 鼠标离开时的回弹动画 */
  .single-letter:not(:hover) {
    animation: bounce-shrink 0.25s linear forwards;
  }
}

@keyframes bounce-stretch {
  0% { transform: scale(1); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1.2); }
}

@keyframes bounce-shrink {
  0% { transform: scale(1.2); }
  40% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

方案优势说明 #

1. 单词整体换行：每个单词被包裹在word-container里，浏览器会把整个单词当成一个排版单元，换行只会在单词或空格之间进行，彻底解决单词被拆分的问题。
2. 动画正常生效：字母用inline-block，完全支持transform和CSS动画，不会像inline元素那样限制变换属性。
3. 空格排版正常：空格段单独用inline渲染，保留了原生文本的空格折叠规则，不会出现多余或缺失的空格。
4. 响应式友好：不管屏幕尺寸怎么变化，换行逻辑完全遵循浏览器的原生文本排版，不需要手动拆分文本适配单行。

如果你的场景需要用React状态来控制类名（比如有更复杂的交互逻辑），也可以把CSS里的:hover换成你原来的类名切换逻辑，核心的单词分组思路保持不变即可。

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