使一个 div 向左扩展而不是向右扩展 | 成帧器运动和反应

Question

我有一个使用framer-motion和chakra-ui创建的简单过渡。 如果您不熟悉chakra-ui ，那么 flex 只不过是一个display设置为flex的div 。 这是它的样子：

我正在尝试进行完全相同的过渡，只是宽度应该向左而不是向右扩展。 “链接”一词可以出现在图标的任一侧，这并不重要。

这是我正在使用的代码：

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