繁体   English   中英

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

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

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

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

在此处输入图像描述

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

这是我正在使用的代码:

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

问题暂未有回复.您可以查看右边的相关问题.
1 应用运动来反应组件 Framer-Motion

我知道我可以像这样直接将motion应用到元素/HTML标签: 但是我怎么能把它应用到这个上呢? 无需将其包装在另一个 HTML 元素中,就像在React-Transition-Group库中一样。 Framer API 提供了Frame组件,但它的作用就像具有自己样式的永久附加 HTML 元素 ...

2 反应成帧器运动延迟故障

这是我使用 Framer-motion 的网站。 https://farhadf.com/ 如果您在 chrome 的三个选项卡上打开它并刷新并检查 header par,您会看到文本动画开始重叠。 我将不胜感激任何帮助 ...

3 react framer-motion中的退出动画没有出现

我正在创建一个空间查看器应用程序并为动画使用 Framer 运动。 我的目标是被称为loading的起始组件在单击时将退出 animation。 然而,目前我所有的组件都没有退出动画。 它们只会导致其他组件,就好像我只使用 react-router 一样。 我的 app.js 看起来像这样 我的lo ...

4 Framer-motion 不适用于 React-Typescript

我收到这些错误我正在运行一个带有 typescript 并使用 webpack 服务的反应应用程序。 我可以使用import { motion } from "framer-motion"在我的.tsx文件中没有错误,但是当我尝试使用&lt;motion.div&gt;时,它会抛出这些错误。 我已 ...

6 在退出时对 framer-motion "AnimatePresence" animation 做出反应,试图让它工作..noob framer-motion 用户

我的所有动画都运行良好,除非我单击一个项目。 没有 animation 出。 卡项目动画,但没有 animation 出来。 我正在尝试实现 AnimatePresence,不得不承认我已经从周日开始重写了这个,然后又回来了,并试图在它上面跟着一些 tuts,但我似乎无法掌握它。 我使用 Anima ...

7 尝试使用 Framer-motion motion.div 为轮播设置动画

我正在尝试使用 Framer-motion motion.div 为轮播动画制作动画,我正在阅读但没有取得太大进展,因为这是我第一次使用动画。 如果有人能指出我正确的方向,我将不胜感激,我基本上有一块 state 链接到我的分页,它将 animation 上的滚动方向设置为“左”或“右”。 我真的只 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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