如何在 React js 中使用 useInvertedScale 和最新的 framer motion 版本？

Question

我使用从 framer-motion@1.6.0 导入的 useInvertedScale 钩子，它抛出一个错误 useInvertedScale is not imported 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>
  );
};

新版本用什么替换了这个挂钩，或者它刚刚被删除了？

Answer 1

useInvertedScale 在旧版本中重命名为 useDeprecatedInvertedScale。

如何在 React js 中使用 useInvertedScale 和最新的 framer motion 版本？

How to use useInvertedScale with the latest framer motion version in react js?

javascript

reactjs

framer-motion

framerjs