css - react onMount 动画

Question

我正在尝试使用 React(和 Tailwind 但没关系)创建一个 onMount 动画。我目前的实现是这样的:

const Component = () => {
    const [mounted, setMounted] = useState(false)
    useEffect(() => {
        setTimeout(() => {
            setMounted(true)
        }, 250)
    }, [])

return(
    <nav
    className={classNames(
    'flex justify-between items-center transform-gpu transition-transform duration-500',
     mounted ? 'translate-x-0' : '-translate-x-full')}> Some nav components </nav>
)
  }

基本上，此代码使状态更改超时，这表明组件何时安装，然后将 CSS 转换应用于元素。
我正在考虑优化当前的解决方案，但想知道是否还有其他方法可以执行 onMount 动画。我很感激任何建议。
如果有必要，我可以创建一个 SandBox 示例。

Answer 1

不确定这是否准确回答了您的问题，但我个人喜欢使用 framer-motion对于这样的东西。例如，如果您想应用动画 translateX安装组件后，您可以执行以下操作:

import { motion } from "framer-motion";

function Component() {
  return (
    <motion.nav
      initial={{ translateX: 0 }}
      animate={{ translateX: 100 }}
      transition={{ ease: "easeOut", duration: 2 }}
    >
      Some components
    </motion.nav>
  );
}

看到这个 codesandbox . (单击代码和框浏览器中的刷新按钮重新触发动画或使用挂载/卸载按钮)
所以，而不是 <nav>只需使用 <motion.nav>并通过 framer-motion Prop 指定动画。如果您另外需要它们，您仍然可以像以前一样使用其他类来设置该元素的样式。
请注意，更短的表达方式是使用 x属性，如图 here :

    <motion.nav
      animate={{ x: 100 }}
      transition={{ ease: "easeOut", duration: 2 }}
    >
      Some components
    </motion.nav>

您可以直接控制动画作为属性或使用 Animate Presence控制组件卸载时的动画。