我最近将一个小项目从Create React App（CRA）迁移到了Next.js。
一切都很好，除了我的滚动动画代码突然不能在Next.js中工作，我不知道为什么。它不会抛出错误;动画根本不会发生。但它在我的Create React App项目中运行得非常好。
我不知道问题在哪里。我该如何解决？
这是组件。

'use client';
import { useEffect, useRef, useState } from 'react';

export interface IProps {
  children: React.ReactNode;
  variant: 'slideFromRight' | 'slideFromLeft';
}

function useIsVisible(ref: React.RefObject<HTMLDivElement>) {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      //remove if for more than one animation
      if (entry.isIntersecting) setVisible(entry.isIntersecting);
    });
    if (ref.current !== null && observer.takeRecords().length === 0)
      observer.observe(ref.current);
    return () => {
      observer.disconnect();
    };
  });

  return visible;
}

export default function ScrollAnimation(props: IProps) {
  // State handling
  const ref = useRef<HTMLDivElement>(null);
  const visible = useIsVisible(ref);

  return (
    <div ref={ref}>
      <div className={visible ? 'animate-' + props.variant : 'notVisible'}>
        {props.children}
      </div>
    </div>
  );
}

然后我导入它并以这种方式 Package 它：

<ScrollAnimation variant="slideFromRight">
    <h1 className="text-white font-bold text-2xl ">Lorem Ipsum</h1>
        <hr className="border border-white my-4" />
        <p className="text-white font-montserrat text-left font-bold">
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industrys standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has survived not only
          five centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged. It was popularised in the 1960s with
          the release of Letraset sheets containing Lorem Ipsum passages, and
          more recently with desktop publishing software like Aldus PageMaker
          including versions of Lorem Ipsum
        </p>
      </ScrollAnimation>

slideFromLeft和Right在我的Tailwind配置中声明：

keyframes: {
        slideFromLeft: {
          '0%': {
            transform: 'translate3d(-100%, 0, 0)',
            visibility: 'hidden',
          },
          '100%': {
            transform: 'translateZ(0)',
          },
        },
        slideFromRight: {
          '0%': {
            transform: 'translate3d(100%, 0, 0)',
            visibility: 'hidden',
          },
          '100%': {
            transform: 'translateZ(0)',
          },
        },
      },
       animation: {
        slideFromLeft: '3s both slideFromLeft ',
        slideFromRight: '3s both slideFromRight ',
      },

下面是一个CodeSandbox条目，其中有一个最小的可复制代码示例，但动画从未被触发。然而，相同的代码在Create React App（CRA）设置中工作没有问题。
CodeSandbox entry
这里有一些关于Siavash 1991的回答的额外信息。
1.浏览器控制台中没有任何错误
1.所有浏览器都支持Intersection Observer，我没有使用旧的环境
1.* refCurrent * 不为null

1. CSS动画在我的Tailwind配置中定义正确。就像我说的，同样的设置在CRA中工作。
   1.父零部件正确渲染。相同，CRA上的设置相同
   1.所有依赖项都是最新的。我只使用React和Next.js，没有其他动画依赖项
   1.检查SSR（服务器端渲染）问题：此组件是一个客户端组件，但我导入动画的页面没有标记为使用客户端。但是，将其标记为使用客户端也没有带来任何变化
   1.重建：事实上，我从零开始重建了这个项目。我创建了一个新的Next.js项目，并根据Next.js逻辑逐页迁移。
   1.在不同浏览器中测试：它并不适用于所有主流浏览器
   1.无兼容性问题
   1.考虑使用不同的动画库：我不使用任何动画库。这是我的自定义代码，我不想。因为这是一种倒退。