React (NextJS) 组件在第一次渲染时不播放过渡动画

Question

我有一个简单的功能组件，使用模块模式来应用样式。 组件接收一个数字（targetView）作为 prop，指示哪个视图编号用于显示此组件。我使用 Zustand 商店来跟踪当前用户正在查看的视图。

当此组件被渲染时，运行 useEffect 以检查 view 是否 === targetView 并将加载的变量切换为 true 或 false。三元运算符用于从元素应用或删除附加类名以触发转换。

Transition 很简单，元素以 transform:translate(-100%) 开头，附加类将其设置为 0，transform:translate(0)。因此元素滑入视图或滑出视图取决于用户当前正在查看此组件。

这基本上像我想象的那样工作，唯一的问题是当组件被安装时没有初始转换。标题元素刚刚出现在最终位置。

我可以检查元素，然后打开/关闭额外的类和过渡工作，进出。这里有什么问题？我认为 React 或 NextJS 有一些我不知道的怪癖。我首先想到可能是 StrictMode（使用 react 18+）运行两次 useEffect 可能是原因，但我尝试将其关闭但问题仍然存在

import React, { useState, useEffect } from "react";
import styles from "./FX.module.scss";
import { useStore } from "../../store";

interface FXProps {
  targetView: number;
}

const FX = ({ targetView }: FXProps): JSX.Element => {
  const view = useStore((state) => state.view);
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    view === targetView ? setLoaded((p) => true) : setLoaded((p) => false);
  }, [targetView, view]);

  return (
    <div className={styles["FX-container"]}>
      <div className={styles["FX-text-container"]}>
        <h1
          className={`${styles["FX-text-title"]} ${
            loaded ? styles["translate-x-0"] : ""
          }`}
        >
          FX.
        </h1>            
      </div>
    </div>
  );
};

export default FX;

CSS类是

.FX-text-title {
    font-family: "Inter Tight", sans-serif;
    font-weight: 600;
    font-size: clamp(68px, 8vw, 80px);
    transition: transform 500ms ease-in-out;
    transform: translateX(-100%);
}

.translate-x-0 {
    transform: translateX(0);
}