Framer Motion 中 useReducedMotion Hook 的 DRY 实现

编程问答 2022-05-23

问题描述

我正在使用 Framer Motion 向 React 项目添加动画，并将 animation variants 作为对象从文件导出，animation.js 用于导入多个组件。

然而，现在我发现了 useReducedMotion hook，我想切换页面和标题动画是否有 y 轴平移和缩放。

因为我要从 animations.js 导出 variants，所以我无法调用 useReducedMotion，它必须在组件中调用。

我尝试从 <motion.div> 导出 animation.js 组件，但这并没有正确环绕页面组件中的子动画，例如 Home.jsx。包装子组件会破坏整个布局。不包装意味着没有任何动画似乎发生。

➡️ 公共 GitHub 项目（这里提到的所有内容现在都在 dev 分支上）：

https://github.com/hdevilbiss/react-portfolio-website/tree/dev/src

查看提交：

  • 4ede87c: "? 在 AnimatedPage 中包装节会破坏布局"
  • 9a2902e: "? AnimatedPage 和 Sections 不能在相同的 lvl 上工作"

我的解决方法是创建重复的动画变体，一个是常规的，一个是前缀为“可访问”的。然而，这似乎并不枯燥，而且很容易忘记导入常规和可访问变体，以及导入 useReducedMotion 钩子并调用它。

所有三个页面都需要类似于以下的代码：

import { pageAnimation,accessiblePageAnimation } from "../animation";
import { useReducedMotion } from "framer-motion"

const Home = () => {
  const shouldReduceMotion = useReducedMotion();
  return (
     <motion.div 
        variants={shouldReduceMotion ? accessiblePageAnimation : pageAnimation} 
        initial="hidden" 
        animate="show" 
        exit="exit"
     >
      <AboutSection />
      // ...
    </motion.div>
  )
}

但是，我更喜欢有 1 个 pageAnimation 变体，仅在允许时切换 y 轴平移，而不是在 3 个不同页面中切换变体。理想情况下，它应该能够环绕子动画。

这就是我想要的方式。

Home.jsx

import { PageAnimation } from "../animation";

const Home = () => {
  return (
     <PageAnimation>
      <AboutSection />
      // ...
    </PageAnimation>
  )
}

我发布这个是希望有人有比创建 2 个不同的变体更好的解决方案。我觉得解决方案就在我面前，但我就是看不到它。我对 Framer Motion 和 React 也很陌生。真的很感激一些提示。

搜索 - 阅读 - 询问

Transition When Doesn't Work in Framer Motion ：本题的父子关系已经建立； OP 需要帮助从子项中删除 animate 属性，以便父项上的 when 属性可以工作。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

accessibilityaccessibilitydrydryframer-motionreactjsreactjsreactjsreactjsvariantvariant