反应条件渲染和平滑的动画/过渡

Question

在 React 中通过条件渲染组件来实现平滑动画的正确/最有效的方法是什么？我在其他帖子上读到，实现此目的的方法之一是拥有一个状态，并在动画/过渡结束时使用 onAnimationEnd 和

onTransitionEnd

将其设置为

false

，如下例所示：

const [isEnabled, setIsEnabled] = useState(true);
const divRef = useRef(null);

return(
   <>
      {isEnabled && <div onAnimationEnd={(e) => {if (e.animationName === 'closeDivAnim') setIsEnabled(false)}} isactive={isEnabled.toString()}></div>}
      <button onClick={() => divRef.current.setAttribute('isactive', 'false')}>Close div</button>
   </>
)

但对我来说，这似乎是一种不可靠的方法（如果我错了，请纠正我）。对我来说似乎更可靠的另一种方法是遵循相同的概念，但使用

setTimeOut

设置状态，并在

useEffect

钩子中设置动画的持续时间。所有这些方法“完成工作”，但是实现组件顺利安装/卸载的正确方法是什么。

我是 React 新手，所以任何英特尔将不胜感激！

Answer 1

您可以使用 Suspense 标签给它一个后备值，这样每当组件在 Suspense 标签内卸载时，它就会显示您传入后备的加载或 ui， 或者，如果您使用函数组件，也可以使用 useTransition 钩子。有关这些元素的更多信息，请参阅官方文档