当我使用 Remix 重建我的网站时，我没有费心花时间制作任何动画。
重建已经上线几周后，我想添加一些更有趣的东西，所以首先想到的是动画。
使用useTransition()钩子，在进行数据突变时，Remix 可以很容易地为你的路由添加转换。但我想要的只是在通过单击链接请求的路线中制作动画，并为当前活动的路线制作动画。
我发现最简单的方法是使用Framer Motion 。通过使用<AnimatePresence />组件包装我的所有内容，我们现在可以添加我们希望在路线转换中具有的实际动画。
这是我的 App 函数在root.tsx （Remix 应用程序的主要入口点）中的样子：
import { AnimatePresence , motion } from ' framer-motion ' import { useOutlet , useLocation } from ' remix ' export default function App () { const outlet = useOutlet () const data = useLoaderData < LoaderData > () return ( < ThemeProvider specifiedTheme = { data . theme } > < Document > < Scripts /> < Layout > < AnimatePresence exitBeforeEnter initial = { false } > < motion . main key = { useLocation (). pathname } initial = { { x : ' -10% ' , opacity : 0 } } animate = { { x : ' 0 ' , opacity : 1 } } exit = { { y : ' -10% ' , opacity : 0 } } transition = { { duration : 0.3 } } > { outlet } </ motion . main > </ AnimatePresence > </ Layout > </ Document > </ ThemeProvider > ) }
如您所见，我在<AnimatePresence>上添加了exitBeforeEnter道具，因为我希望它一次只渲染一个组件。退出组件将在渲染进入组件之前完成其退出动画。因为我还希望初始加载不触发动画，所以我使用了initial={false}属性。这将导致在 AnimatePresence 首次加载时出现的组件以动画状态启动。只有在此初始渲染之后进入的组件才会进行动画处理。
通过将我的<Layout>保留在<AnimatePresence>之外，我的页眉和页脚将不会被动画化，只有页面内的内容，正是我想要的！
在<motion.main>上，您必须为 Framer 传递一个密钥才能识别唯一路线，我选择传递 Remix 的内置useLocation()钩子提供的路径名，效果很好。
剩下的就是传递exit 、 initial 、 animate和transition道具，它们本身就说明了问题，并且在docs中有详细记录。
这是一个非常基本的动画，但我确实喜欢这个结果，它使网站更有活力:-)。
查看thomasledoux.be上的实时站点。代码可以在Github上找到。
原文： https://dev.to/thomasledoux1/adding-route-transition-animations-in-remix-52jm