如何让Div向左而非向右展开？基于framer-motion与React

原效果是鼠标悬停时从右侧展开显示文字，现在要改成从左侧展开，同时保持过渡动画一致，调整后的代码如下：

<Flex width={"4em"} height={"4em"} position="relative">
    <Flex as={motion.div}
        zIndex={6}
        backgroundColor={"white"}
        whileHover={{ width: "unset", borderRadius: "15px" }}
        whileTap={{ scale: 0.9 }}
        style={{ originX: 0, originY: "50%" }}
        position={"absolute"}
        shadow={"lg"}
        name={"Copy URL"}
        width={"4em"}
        height={"4em"}
        borderRadius={"50%"}
        onClick={copyURL}
        overflowX={"hidden"}
        right={0}
    >
        <Flex fontSize={"2em"} marginLeft={"1em"} alignItems={"center"} justifyContent={"center"} height={"100%"}>
            Link
        </Flex>
        <Flex alignItems={"center"} justifyContent={"center"} grow={0} minWidth={"4em"} height={"4em"} >
            <BiLink fontSize={"2rem"} />
        </Flex>
    </Flex>
</Flex>

关键修改点： #

• 把style里的originX从50%改成0，让动画从左侧中心开始展开
• 将文字“Link”的Flex组件移到图标组件的前面，确保展开时文字从左侧显示
• 把文字的marginRight改成marginLeft，保证文字和图标之间的间距合理
• 给motion容器加上right={0}，固定在父容器右侧，避免向左展开时位置偏移
• 父Flex加上position="relative"，让绝对定位的子元素以父容器为参考

这样修改后，就能实现和原效果一致但从左侧展开的过渡动画，文字也位于图标左侧。

内容的提问来源于stack exchange，提问作者Vipul Rajan