第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React-Spring 在框懸停時淡化 2 個按鈕

React-Spring 在框懸停時淡化 2 個按鈕

肥皂起泡泡 2023-05-11 09:49:16
我有一個盒子,中間有兩個按鈕。當我將鼠標懸停在框上時,我希望按鈕將不透明度從 0 轉換為 1,并且我希望將轉換屬性從 translateY(20px) 轉換為 translateY(0),以便它們也向上移動。我有這種效果,但是我想讓底部按鈕的動畫在懸停時稍微延遲,并且我希望頂部按鈕的動畫在取消懸停時稍微延遲。我怎樣才能用 react-spring 實現(xiàn)這個目標?這是我所擁有的  const [isHovering, setIsHovering] = useState(false);  const fadeStyles = useSpring({    from: { opacity: 0, transform: `translateY(20px)` },    to: {      opacity: isHovering ? 1 : 0,      transform: isHovering ? `translateY(0px)` : `translateY(20px)`,    },  });  return (    <div>      <animated.div style={fadeStyles}>        <Button>Change</Button>      </animated.div>      <animated.div style={fadeStyles}>        <Button>Details</Button>      </animated.div>    </div>  )
查看完整描述

2 回答

?
慕村9548890

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>

? ))}

查看完整回答
反對 回復 2023-05-11
?
蝴蝶不菲

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)`,

? ? },


});


查看完整回答
反對 回復 2023-05-11
  • 2 回答
  • 0 關注
  • 153 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號