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