在成帧器运动中为 scaleX 设置动画而不影响儿童的比例答案

【问题标题】：animate scaleX in framer motion without affecting children's scale在成帧器运动中为 scaleX 设置动画而不影响儿童的比例
【发布时间】：2021-05-13 06:31:29
【问题描述】：

Framer motion 4 已贬值 useInvertedScale() 它说要使用布局道具，但似乎没有达到相同的效果。我正在尝试 scaleX 影响子级规模的父级 div whiteout。我的动画中还有更多内容，但这是一个简单的细分父母 scalesX 但孩子不应该缩放。

    const parentVarent= {
      show: {
        scaleX: 1,
        transition: {
          ease: "easeOut",
          duration: 3,
        },
      },
      hide: {
        scaleX: 0,
      },
    };

const MyComponent = () => {
 return (
    <motion.div
      animate="show"
      variants={parentVarent}
      initial="hide"
    >
      <motion.div variants={parentVarent} layout>
        <p>
          SOME TEXT TO NOT SACLE
        </p>
      </motion.div>
    </motion.div>
 );
};

【问题讨论】：

对此进行了破解，但也无法弄清楚:)
我还是很好奇，所以我在成帧器动态不和谐中问了这个问题，如果你想跟随discord.com/channels/341919693348536320/716908973713784904/…

标签： javascript framer-motion

【解决方案1】：

好吧，在讨论 framer-motion discord 之后：你不能使用变体或 animate 道具。

    <Container
        style={{
          width: isBig ? "100%" : "0%",
          borderRadius: "15px"
        }}
        layout
      >
        <Text />
      </Container>

您必须改用样式标签或 CSS。此外，布局道具不是替代品。看起来您无法将宽度一直为零，并且布局更像是“从一种尺寸到另一种尺寸”的实用程序。如果您在我的 v4 示例中删除填充，它将不再起作用：/

供参考：

不和谐链接：https://discord.com/channels/341919693348536320/716908973713784904/842083550990958642

这出现在 Github 问题中：https://github.com/framer/motion/issues/1145

我在 v2 中创建了一个使用 useInvertedScale() 的工作版本： https://codesandbox.io/s/framer-motion-layout-scaling-text-in-framer-motion-295-useinvertedscale-ixqln

我在 v4 中创建了一个不在这里的工作版本：https://codesandbox.io/s/framer-motion-layout-scaling-text-in-framer-motion-4-70eb3

【讨论】：