2 回答

TA貢獻1884條經(jīng)驗 獲得超4個贊
這是一個有點棘手的問題。乍一看,您似乎無法使用單個 useSpring 函數(shù)實現(xiàn)它,因為不同的延遲。您可以嘗試使用 useTrail,但軌跡不容易逆轉。所以 useSprings 仍然存在。
delay 屬性是關鍵。您必須將它與函數(shù)參數(shù)一起使用,這樣您就可以根據(jù)按鈕的索引和懸停狀態(tài)更改延遲。我最終得到了這個,它創(chuàng)建了 4 個動畫 div 更通用一些:
? const count = 4;
? const [springs, setSprings] = useSprings(count, (i) => ({
? ? opacity: 0.2,
? ? transform: `translateY(20px)`
? }));
? const onHover = (isHover) => {
? ? setSprings((i) => ({
? ? ? opacity: isHover ? 1 : 0.2,
? ? ? transform: isHover ? `translateY(0px)` : `translateY(20px)`,
? ? ? delay: isHover ? i * 100 : (count - 1 - i) * 100
? ? }));
? };
渲染部分:
? {springs.map((props, index) => (
? ? <animated.div key={index} style={props}>
? ? ? button
? ? </animated.div>
? ))}

TA貢獻1810條經(jīng)驗 獲得超4個贊
您可以使用該delay屬性指定以毫秒為單位的時間長度,以通過以下方式延遲動畫:
所以在你的情況下,延遲 80ms:
const fadeStyles = useSpring({
? ? delay: 80,
? ? from: { opacity: 0, transform: `translateY(20px)` },
? ? to: {
? ? opacity: isHovering ? 1 : 0,
? ? transform: isHovering ? `translateY(0px)` : `translateY(20px)`,
? ? },
});
添加回答
舉報