使一個 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>