在不影响 children 的比例的情况下在成帧器运动中为 scaleX 设置动画
animate scaleX in framer motion without affecting children's scale
成帧器运动 4 已贬值 useInvertedScale()
它说要改用布局道具,但似乎没有达到相同的效果。
我正在尝试 scaleX parent div whiteout 影响 children 的比例。
我的动画中还有更多内容,但这是一个简单的细分
parent scalesX 但 children 不应缩放。
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>
);
};
好的,在讨论 framer-motion discord 之后:你不能使用变体或 animate 道具。
<Container
style={{
width: isBig ? "100%" : "0%",
borderRadius: "15px"
}}
layout
>
<Text />
</Container>
您必须改用样式标签或 CSS。此外,布局道具不是替代品。看起来你不能让宽度一直为零,而且布局更像是一个“从一种尺寸到另一种尺寸”的实用程序。如果您删除我的 v4 示例中的填充,它将不再有效:/
供参考:
不和谐 Link: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
成帧器运动 4 已贬值 useInvertedScale() 它说要改用布局道具,但似乎没有达到相同的效果。 我正在尝试 scaleX parent div whiteout 影响 children 的比例。 我的动画中还有更多内容,但这是一个简单的细分 parent scalesX 但 children 不应缩放。
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>
);
};
好的,在讨论 framer-motion discord 之后:你不能使用变体或 animate 道具。
<Container
style={{
width: isBig ? "100%" : "0%",
borderRadius: "15px"
}}
layout
>
<Text />
</Container>
您必须改用样式标签或 CSS。此外,布局道具不是替代品。看起来你不能让宽度一直为零,而且布局更像是一个“从一种尺寸到另一种尺寸”的实用程序。如果您删除我的 v4 示例中的填充,它将不再有效:/
供参考:
不和谐 Link: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