使用react-intersection-observer实现标题视口触发延迟动画时，如何先隐藏文本再触发动画？

嘿，我完全懂你的困扰——现在标题在延迟动画触发前会先明晃晃地显示出来，确实破坏了动画的连贯性。咱们只需要调整一下标题的初始状态，让它在进入视口前保持和动画起始帧一致的隐藏状态，就能完美解决这个问题啦！

问题根源分析 #

你当前的代码里，当inView为false时，标题没有任何隐藏样式，所以默认是可见的。加上delayed类的0.2s延迟后，就会出现“先显示0.2s，再开始动画”的尴尬情况。

解决方案：设置初始隐藏状态 #

我们要让标题在未进入视口时，就处于动画的起始状态（透明+偏移），等进入视口并过完延迟后，再执行动画过渡到正常显示状态。

1. 修改CSS，添加初始隐藏类并完善动画

/* 初始隐藏类，和动画的from状态完全匹配 */
.title-hidden {
  opacity: 0;
  transform: translateX(-100px);
}

.fade-in-right-animation {
  /* 添加forwards，让动画结束后保持最终状态 */
  animation: fadeInRight 0.3s ease-in-out forwards;
}

.delayed {
  animation-delay: 0.2s;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    /* 明确指定最终位置，避免样式歧义 */
    transform: translateX(0);
  }
}

2. 调整JSX的className逻辑

让标题在未进入视口时应用隐藏类，进入视口后切换为动画类：

import {InView} from "react-intersection-observer";

<InView triggerOnce>
  {({ref, inView}) => (
    <h2
      ref={ref}
      className={`mb-4 flex text-2xl font-bold ${
        inView ? "delayed fade-in-right-animation" : "title-hidden"
      }`}>
      My title
    </h2>
  )}
</InView>

效果说明 #

这样调整后，标题在未进入视口时会一直保持透明且偏移的隐藏状态；当进入视口后，会先等待0.2s延迟，再从隐藏状态平滑过渡到正常显示，完全不会出现“先显示再动画”的问题啦！

备注：内容来源于stack exchange，提问作者Johan