简体   繁体   English

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

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 .我有一个使用framer-motionchakra-ui创建的简单过渡。 If you are not familiar with chakra-ui a flex is nothing but just a div with the display set to flex .如果您不熟悉chakra-ui ,那么 flex 只不过是一个display设置为flexdiv 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>

问题暂未有回复.您可以查看右边的相关问题.
3 react framer-motion中的退出动画没有出现 - Exit animations in react framer-motion not appearing

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

6 在退出时对 framer-motion "AnimatePresence" animation 做出反应,试图让它工作..noob framer-motion 用户 - react framer-motion "AnimatePresence" animation on exiting, trying to get it working..noob framer-motion user

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

7 尝试使用 Framer-motion motion.div 为轮播设置动画 - Trying to animate a carousel with Framer-motion motion.div

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

8 React framer-motion - 如何从特定的div开始计算scrollYProgress - React framer-motion - how to start counting scrollYProgress starting from specific div

我想要做的是在视口到达容器顶部时计算scrollYProgress ,离开盒子时scrollYProgress应该是1。 我该怎么做? 当前的问题是scrollYProgress在应用程序的顶部开始计数。 应用程序.js 代码沙盒 https://codesandbox.io/s/adoring ...

暂无
暂无

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

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