简体   繁体   中英

Make a Div Expand to the Left insteaf of the Right | framer-motion and react

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文简体   中文繁体   中英对照 版本,有任何建议请联系yoyou2525@163.com。

I have a simple transition that I created using framer-motion and chakra-ui . If you are not familiar with chakra-ui a flex is nothing but just a div with the display set to flex . This is what it looks like:

在此处输入图像描述

I'm trying to do the exact same transition just with the difference that the width should expand to the left and not to the right. The word "Link" can appear on either side of the icon, it's not important.

Here's the code I'm working with:

<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>

No answers.You can refer to the related questions on the right.
暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM