React-Vertical-Timeline-Component在Next.js+TypeScript下的显示与动画问题

我使用v1.4的react-vertical-timeline-component，搭配TypeScript ^5和Next.js框架，当前组件仅显示一条线，无动画效果也不展示卡片，且卡片被标记了is-hidden类。手动设置visible={true}可显示卡片但丢失动画，无法完全发挥组件功能，怀疑是React与Next.js的兼容性问题，附上相关代码求解决方法。

相关代码 #

Experience.tsx #

"use client";

import React from "react";
import {
  VerticalTimeline,
  VerticalTimelineElement,
} from "react-vertical-timeline-component";
import "react-vertical-timeline-component/style.min.css";
import { experiencesData } from "@/constants";

const Experience: React.FC = () => {
  return (
    <VerticalTimeline>
      {experiencesData.map((experience, index) => (
        <VerticalTimelineElement
          // visible={true}
          className="vertical-timeline-element--work"
          contentStyle={{ background: "rgb(33, 150, 243)", color: "#fff" }}
          contentArrowStyle={{ borderRight: "7px solid  rgb(33, 150, 243)" }}
          key={index}
          date={experience.date}
          iconStyle={{ background: "rgb(33, 150, 243)", color: "#fff" }}
          icon={<div>{experience.icon}</div>}
        >
          <h3>{experience.title}</h3>
          <h4 className="vertical-timeline-element-subtitle">Miami, FL</h4>
          <p>{experience.description}</p>
        </VerticalTimelineElement>
      ))}
    </VerticalTimeline>
  );
};

export default Experience;

数据代码 #

const arobase = '/docker.webp';

export const experiencesData = [
  {
    title: "Graduated bootcamp",  
    location: "Miami, FL",
    description:
      "I graduated after 6 months of studying. I immediately found a job as a front-end developer.",
    icon: React.createElement('img', { src: arobase, alt: 'Votre alt' }),
    date: "2019",
  },
  {
    title: "Front-End Developer",
    location: "Orlando, FL",
    description:
      "I worked as a front-end developer for 2 years in 1 job and 1 year in another job. I also upskilled to the full stack.",
      icon: React.createElement('img', { src: arobase, alt: 'Votre alt' }),
    date: "2019 - 2021",
  },
  {
    title: "Full-Stack Developer",
    location: "Houston, TX",
    description:
      "I'm now a full-stack developer working as a freelancer. My stack includes React, Next.js, TypeScript, Tailwind, Prisma and MongoDB. I'm open to full-time opportunities.",
      icon: React.createElement('img', { src: arobase, alt: 'Votre alt' }),
    date: "2021 - present",
  },
] as const;

1. 手动触发滚动检测，修复DOM可见性判断 #

react-vertical-timeline-component的动画和显示逻辑依赖滚动时的DOM可见性检测，在Next.js客户端组件中，可能因为hydration时机问题导致初始检测失败，所有卡片被标记为is-hidden。可以在组件挂载后手动触发滚动事件，强制组件重新计算可见性：

修改后的Experience.tsx代码：

"use client";

import React, { useEffect } from "react";
import {
  VerticalTimeline,
  VerticalTimelineElement,
} from "react-vertical-timeline-component";
import "react-vertical-timeline-component/style.min.css";
import { experiencesData } from "@/constants";

const Experience: React.FC = () => {
  useEffect(() => {
    // 组件挂载后触发滚动事件，强制重新计算卡片可见性
    window.dispatchEvent(new Event('scroll'));
  }, []);

  return (
    <VerticalTimeline>
      {experiencesData.map((experience, index) => (
        <VerticalTimelineElement
          className="vertical-timeline-element--work"
          contentStyle={{ background: "rgb(33, 150, 243)", color: "#fff" }}
          contentArrowStyle={{ borderRight: "7px solid  rgb(33, 150, 243)" }}
          key={index}
          date={experience.date}
          iconStyle={{ background: "rgb(33, 150, 243)", color: "#fff" }}
          icon={<div>{experience.icon}</div>}
        >
          <h3>{experience.title}</h3>
          {/* 替换硬编码的城市为数据中的location字段 */}
          <h4 className="vertical-timeline-element-subtitle">{experience.location}</h4>
          <p>{experience.description}</p>
        </VerticalTimelineElement>
      ))}
    </VerticalTimeline>
  );
};

export default Experience;

2. 自定义CSS强制移除隐藏样式（备选） #

如果上面的方法无效，可以通过CSS覆盖is-hidden类的默认隐藏规则，同时保留动画效果：

在全局CSS文件（如app/globals.css）中添加：

.vertical-timeline-element.is-hidden {
  opacity: 1 !important;
  transform: none !important;
}

这样卡片会默认显示，滚动时依然能触发组件自带的动画。

3. 升级组件版本 #

v1.4的react-vertical-timeline-component发布时间较早，对Next.js 13+的App Router支持可能不完善。可以尝试升级到最新版本：

npm install react-vertical-timeline-component@latest

升级后注意查看组件文档，确认API是否有变更（比如visible属性的用法是否调整）。

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