如何将Framer Motion +样式组件一起使用？

Question

我想使用样式组件和帧运动在一起，以样式和动画....我可以使用SC或FM中的变量来设置样式和动画吗？

什么是一个例子？

Answer 1

你应该能够使用样式化的函数作为任意运动组件的临时函数

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 }} />