当React组件挂载时如何实现动画效果。

Question

我正在尝试使用React（以及Tailwind，但这不重要）创建一个在挂载时进行动画的效果。 我目前的实现方式如下：

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 translate应用于元素。
我正在考虑优化当前解决方案，但想知道是否有其他方法来执行onMount动画。感谢任何建议。 如果需要，我可以创建一个SandBox示例。

- PCPbiscuit

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。（在codesandbox浏览器中点击刷新按钮以重新触发动画或使用mount/unmount按钮）

因此，不要使用<nav>，而是使用<motion.nav>并通过framer-motion属性指定动画。如果需要，您仍然可以像以前一样使用其他类来样式化该元素。

请注意，更简短的表达方式是使用x属性，如此处所示：

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

您可以直接使用属性来控制动画，或者使用Animate Presence在组件卸载时控制动画。

- Giraphi

---

看起来很不错，但我正在尝试不使用专门为此制作的外部库来完成它。这不仅仅是让它看起来优雅，还要理解它的工作原理。 不过，你的解决方案真的很酷，我稍后会试一下。 - PCPbiscuit

如果您只想使用基本的React，我认为您使用mounted状态和useEffect的方法是正确的。我唯一会做不同的事情就是重新组织CSS。例如，不是为每个元素使用单独的类，而是使用一个名为“navbar”的类来保存所有“正常”的CSS，然后在挂载后添加一个名为“is-mounted”的类（该“is-mounted”类包含translateX）。但是，您可能需要分享您的CSS，以便我们更多地了解这个问题。像flex等这些类从哪里来？ - Giraphi

这些是Tailwind的实用类。我同意你关于is-mounted的观点，那实际上是我想要做的，但我决定在这里检查是否有更好的实现方法。非常感谢！ - PCPbiscuit

Answer 2

你可以通过使用 @keyframes 来实现。 这是一个可工作的示例（请注意，这是使用 tailwindcss）：

React 组件：

import React from 'react';

function TransitionComponent() {
  return (
    <div className="w-48 h-48 bg-blue-500 animate-slide-left">
      {/* Content */}
    </div>
  );
}

export default TransitionComponent;

全局样式表：

@keyframes slide-left {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.animate-slide-left {
  animation: slide-left 0.5s ease-in-out;
}

使用这种方法，您可以对动画拥有最大的控制权，而且不需要安装任何软件包。

如果您正在使用tailwind css，并且在添加其他依赖项时没有问题，我还可以推荐tailwindcss-animate。 它非常简单易用，专门为挂载事件上的动画设计。而且它的大小只有18 kB！

- jan.grp