標簽[framer-motion] - 堆棧內存溢出

[英]Need help getting local image to appear using Framer Motion and NEXTjs

我正在使用 NEXTJS 和 framer motion，但本地圖像沒有出現在 web 頁面上。相反，我得到了那個小剪貼畫。下面是我對特定組件不起作用的代碼： ...

[英]Framer Motion return drag button

我有可以使用成幀器運動拖動來移動的對象。我怎樣才能制作一個按鈕將所有元素返回到它們的初始 position？我試着用動畫來做，但 animation 又尖又丑。我認為這是因為當你釋放元素時，它仍然會在空間中“漂浮”一段時間，並且在 animation 繼續這樣做之后。 ...

如何使用 React 制作 3D 輪播

[英]How to do a 3D carousel wth React

我找不到如何使用 React 至少顯示三個元素來制作 3D 輪播（又名幻燈片）。 npm 中似乎沒有最新的庫或組件:( 它應該是這樣的： ...

成幀器運動 animation 不適用於通過 map() 呈現的元素

[英]framer motion animation not working with element that rendered through map()

我正在嘗試制作這樣的動畫： https://drive.google.com/file/d/1WQCg7j49xd5XfuaYuC2YFQCUU-UXassp/view?usp=sharing 這是我的代碼：<motion.div layout className="grid grid-col ...

Framer-motion：點擊另一個按鈕時觸發 onTap()

[英]Framer-motion: Fire onTap() when click the other button

我有 RotatingButton，它在單擊時轉動和改變比例。（旋轉必須更慢，所以我使用了兩個動作並增加了旋轉的持續時間。）按鈕將 +1 添加到 state。（ addValue() ）但問題是我有第二個按鈕，它從 state ( removeValue() ) 中刪除 -1 值，它還必須 ...

如何制作成幀器運動 Slider 在按下按鈕時拖動和移動 - ReactJS

[英]How to Make a Framer Motion Slider With Drag and Move on Button Press - ReactJS

我是一名新開發人員，我想知道如何在按下按鈕時移動 translateX 而不會破壞 slider 對拖動的約束。我得到了拖累，但它只是實現了按鈕，這讓我感到困惑。 Slider 圖片：代碼一團糟，因為我快瘋了。我只是想讓它在每次按下按鈕時將它的 X 移動一些像素，然后在 slider 結束 ...

成幀器運動 whileInView 在組件進入視口之前激活

[英]Framer motion whileInView activating before component is in viewport

我正在嘗試使用 Framer Motion 制作一個簡單的 animation，其中一個組件漂浮在其中並從左側變為不透明。該組件位於英雄部分的正下方，但在頁面頂部時不會出現在視口中（英雄部分是整個視口高度）。該組件與英雄部分位於單獨的 div 中。請注意，如果這與此有關，我正在使用 Chakr ...

React Framer-motion AnimatePresence 退出 animation 不起作用

[英]React Framer-motion AnimatePresence exit animation does not work

我正在嘗試為一些頁面轉換設置動畫，但由於某種原因，只有輸入 animation 有效。文本正確滑入，但在路由到另一個組件時不會滑出，而是消失了。我已經嘗試使用 location.pathname 將鍵分配給各個組件，也嘗試將鍵分配給 Outlet 組件，在 AnimatePresence 和 m ...

如何使用 Framer Motion 沿路徑移動 SVG object？

[英]How to move an SVG object along with path by using Framer Motion?

我有一個 SVG object 和一條路徑。如何移動/運行 object 和 PATH？這是我的意思的一個例子我試圖找到文檔，但沒有在 Framer Motion 中找到任何合適的文檔。我期待我的代碼有一個合適的解決方案。謝謝：） ...

為什么我的 Framer Motion animation 發生兩次？

[英]Why is my Framer Motion animation happening twice?

我在徽標上有一個 animation，我希望在將鼠標懸停在該徽標上時發生。這是CodeSandbox 演示。當前行為：當您在徽標上輸入 hover 時，會出現正確的 animation。當您離開徽標時，中間路徑會再次旋轉。預期行為：Animation 發生在 hover 上，當鼠標不再懸停 ...

如何在 SVG 路徑內的 select？

[英]How to select inside of SVG path?

如何更改圓圈的內部顏色？或者當我的 cursor 進入 SVG 圈內時，我該怎么做 animation？我嘗試使用填充、填充規則和填充不透明度，但它不起作用。當我在圈內 hover 時，我希望他們做 animation 這是代碼： https://codesandbox.io/s/fram ...

`framer-motion` 中的方向

[英]Direction in `framer-motion`

我們如何反轉framer-motion實現的方向 animation？這是我的組件，這將框元素的background從#000更改為#ff0 ：但這個 animation 的方向是從initial到animate命名空間，但我想如果props.isMenuActive是true ，那么 anim ...

如何使用 AnimatePresence 實現干凈的進入和退出？

[英]How to use AnimatePresence for clean entry and exit?

我正在嘗試使用 Framer Motion 的 AnimatePresence 組件在我的下一個應用程序中進行干凈的進入/退出 animation。我試過使用延遲組件，但只適用於一個組件。對於其他組件，它們只是消失而沒有任何 animation。預期行為和當前行為如下所示：預期和工作行為 ...

使用 Framer Motion 的動畫高度在 React 中不起作用

[英]Animating height using Framer Motion not working in React

所以，我一直在嘗試為我的 React 項目使用 Framer Motion。當 div 被渲染時，我基本上想將高度從 0 動畫化到“自動”。我試過下面的代碼，但高度沒有得到動畫當我用寬度替換高度時，animation 工作正常，但無法弄清楚為什么高度沒有動畫。而且我找不到與此相關的任何適當文 ...

在 Framer motion react 中使用 animation 跟隨鼠標

[英]Follow mouse with animation in Framer motion react

我的 React 應用程序中有一個自定義 cursor 組件。為了在視口內實現平滑過渡，我使用了成幀器運動。鼠標下的 div 有一些自定義樣式，它遵循 cursor 沒有任何問題。但我希望該 div 始終具有動畫效果，例如旋轉 + 更改邊框半徑，甚至還更改 bg 顏色。從 framer mo ...

順利展開 Div 以順風順風不發生

[英]Expand Div smoothly in react with tailwind not happening

我正在嘗試為包含我的輸入元素的 div 制作動畫，它應該平滑展開，文本區域起初很小，其他兩個輸入和按鈕被隱藏，當單擊文本區域輸入和按鈕時顯示，但是沒有過渡，只是尺寸的跳躍，我嘗試使用 framer motion 但它不接受 tailwindcss 值，將轉換 class 放在父 div 中也沒有幫助 ...

如何停止 framer motion animation 在每次重新渲染時運行

[英]how to stop framer motion animation run on every re rendering

我正在為 animation 使用 framer motion，我的問題是 animation 在我的頁面上每次重新渲染時都會觸發。我想要的行為是 animation 在頁面進入或重新加載時僅一次，而不是通過重新呈現。這是我的組件：我在這個組件中有一些 state 可能會導致重新呈現頁面，它會 ...

安裝或卸載組件時 Framer Motion 沒有動畫

[英]Framer Motion not animating when mount or unmounting a component

我正在使用 framer motion 為自定義表格行設置動畫，只要它們被安裝。但它不是動畫。當我檢查 web 時，他們指定 AnimatePresence 應該是運動的直接父級。它應該有一個鍵值。仍然不起作用。我不確定我錯過了什么。請指教。謝謝。 ...

更改背景圖像向后移動的文本顏色

[英]Change text color where the background image moves behind

背景 pl.net 在一個圓形區域內移動，如果圖像向后移動，則將文本顏色更改為橙色。 Pl.net組件：和背景圖像樣式：圖像我想要什么文本應該隨着 pl.net 的移動而改變顏色。要移動 pl.net，我使用 framer-motion 庫。還有視頻以便更好地理解： video Is it ...

在 React 中使用 framer-motion；代碼編譯失敗

[英]Using framer-motion with React; code failed to compile

我正在嘗試在項目中使用“framer-motion”，但我的 React 代碼無法編譯；請問我該如何解決？這些是我在終端中遇到的錯誤。編譯失敗。嘗試導入錯誤：“useId”未從“react”導出（導入為“useId”）。錯誤 in./node_modules/framer-motion/d ...