使一个 div 向左扩展而不是向右扩展 | 成帧器运动和反应
[英]Make a Div Expand to the Left insteaf of the Right | framer-motion and react
问题描述
我有一个使用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>
0 条回复
本文暂无回复，试试以下方法：
CSS：做对了 <div> 扩展到非固定宽度左列旁边的剩余空间
[英]CSS: Make right <div> expand to remaining space beside a non-fixed width left column
添加文本时，使div容器自动扩展到左侧而不是右侧的宽度
[英]Make div container auto-expand width to the left instead of the right when text is added
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.