时间戳

首页 > 解决方案 > 反应 onMount 动画

css - 反应 onMount 动画

问题描述

我正在尝试使用 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 动画。我很感激任何建议。如果有必要，我可以创建一个沙盒示例。

标签： cssreactjs

解决方案

不确定这是否能准确回答您的问题，但我个人喜欢使用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>
  );
}

请参阅此代码框。（单击代码和框浏览器中的刷新按钮以重新触发动画或使用挂载/卸载按钮）

因此，不仅仅是通过 framer-motion 道具<nav>使用和指定动画。<motion.nav>如果您还需要其他类，您仍然可以像以前一样使用其他类设置该元素的样式。

请注意，一种更短的表达方式是使用该x属性，如下所示：

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

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

推荐阅读