![](/img/trans.png)
[英]How to use framer motion animation with swiper.js (React)?
[英]How to use useInvertedScale with the latest framer motion version in react js?
我使用从 framer-motion@1.6.0 导入的 useInvertedScale 钩子,它抛出错误 useInvertedScale is not import with the latest version of framer-motion 。
这就是我使用它的方式:
import React from "react";
import { motion, useInvertedScale } from "framer-motion";
export const Title = ({ title, category, isSelected }) => {
const inverted = useInvertedScale();
const x = isSelected ? 30 : 15;
const y = x;
const scaleTranslate = ({ x, y, scaleX, scaleY }) =>
`scaleX(${scaleX}) scaleY(${scaleY}) translate(${x}, ${y}) translateZ(0)`;
return (
<motion.div
initial={false}
animate={{ x, y }}
transition={
isSelected
? { type: "spring", stiffness: 200, damping: 30 }
: { type: "spring", stiffness: 300, damping: 35 }
}
transformTemplate={scaleTranslate}
style={{
...inverted,
originX: 0,
originY: 0,
position: "absolute",
top: 0,
left: 0,
maxWidth: "300px",
}}
>
<span
style={{
color: "#fff",
fontSize: "14px",
textAlign: "right",
direction: "rtl",
}}
>
{category}
</span>
<h2 style={{ textAlign: "right", direction: "rtl" }}>{title}</h2>
</motion.div>
);
};
用新版本替换这个钩子是什么,或者它刚刚被删除了?
useInvertedScale
在旧版本中重命名为useDeprecatedInvertedScale
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.