我正試圖制作一個(gè)模型，它將在一個(gè)旋轉(zhuǎn)木馬風(fēng)格的組件中顯示一些幻燈片，并在幻燈片變化時(shí)制作一些簡單的進(jìn)入/退出動(dòng)畫。我使用的是react-spring的useTransition鉤子，問題是當(dāng)一個(gè)過渡發(fā)生時(shí)，有一些時(shí)刻，出幻燈片(淡出)和入幻燈片(淡入)都在模態(tài)中。這會(huì)導(dǎo)致高度加倍的渲染問題，因?yàn)閮蓮埢脽羝枰蚕硐嗤膶挾取?/p>

這里有一個(gè)代碼沙盒演示了這個(gè)問題

我曾嘗試遵循一些在線指南，但不幸的是，它們似乎適用于舊版本的react-spring，其中掛鉤的返回值不同。

我還嘗試將包含div的樣式更改為position: absolute，這樣它將允許重疊組件，但是模態(tài)沒有正確的高度和寬度尺寸來正確顯示內(nèi)容。為了解決這個(gè)問題，我已經(jīng)試過了

將維度存儲(chǔ)為狀態(tài) 用大值初始化 將這些調(diào)暗應(yīng)用到包含幻燈片的div 保持對(duì)div的引用，并在useEffect鉤子中抓取實(shí)際計(jì)算的dims，然后更新狀態(tài)dims 這種方式給出了我想要的效果，但是有兩個(gè)主要的問題——計(jì)算出的高度似乎沒有正確更新，并且它沒有響應(yīng)視口的變化。盡管做了我想做的事情，但感覺這是一個(gè)糟糕的設(shè)計(jì)。這里有一個(gè)解決方法的沙盒。

我也遇到了同樣的問題。具有簡單的進(jìn)/出轉(zhuǎn)換。 用exitBeforeEnter: true屬性求解: 確保在新項(xiàng)目激活之前，任何項(xiàng)目保持激活狀態(tài) 我注意到這是一個(gè)相對(duì)較新的庫(從版本9.4.0開始)。 修復(fù)了你的沙盒。

對(duì)我有效的一個(gè)解決方案是使用:

位置:絕對(duì)

這是可行的，因?yàn)閯?dòng)畫div中的每個(gè)元素都不依賴于動(dòng)畫。