你如何一起使用 Framer Motion + Styled Components？答案

【问题标题】：How do you use Framer Motion + Styled Components together?你如何一起使用 Framer Motion + Styled Components？
【发布时间】：2020-10-07 14:23:02
【问题描述】：

我想同时使用 Styled Components 和 Framer Motion 来设置样式和动画...... 我可以使用 SC 或 FM 中的变量来设置样式和动画吗？

什么是例子？

【问题讨论】：

是的，你可以，你想要的风格是什么？请详细说明，显示一些代码示例。您在 framer-docs 中有 styled-components 示例，您希望得到什么答案？

标签： reactjs styled-components framer-motion

【解决方案1】：

您应该能够将样式化函数用作任何运动组件的 HOC

import styled from "styled-components";
import { motion } from "framer-motion";

const AnimatedDiv = styled(motion.div)`
  background-color: rebeccapurple;
  width: 200px;
  height: 200px;
`;

这允许您像这样使用组件：

<AnimatedDiv animate={{ scale: 3 }} />

【讨论】：

谢谢。但我仍然不想在创建的元素/标签中添加动画语法。我想让它以“可变”方式工作
您想详细说明“可变”方式的实际外观吗？

【解决方案2】：

最好的方法是使用as prop：

<StyledComponent as={motion.div}/>

这保持了framer-motion 的“可变性”意图，正如您所说，能够轻松地将 DOM 元素替换为其对应的运动元素。

这在网上很难找到，所以我想发布它。

【讨论】：