如何使用動畫更改 Next.Js Image Component src？

Question

在 Nextjs 中，當我將鼠標懸停在圖像上時，我可以使用狀態更改 src，但我想使用淡入淡出等動畫來做到這一點。

const [logoSrc, setLogoSrc] = useState("/logo.png");

<Image
   src={logoSrc}
   width={237}
   height={64}
   priority
   onMouseEnter={() => {
      setLogoSrc("/hover-logo.png");
    }}
      onMouseOut={() => {
      setLogoSrc("/logo.png");
    }}
/>

Answer 1

遺憾的是，圖像的src屬性不是可動畫屬性的一部分。 如果你想要一個動畫，你可以加載兩個圖像，通過 CSS 隱藏和顯示它們，如下所示：

 body { margin: 0; } .img-container { position: relative; height: 100vh; } .img-container .img2 { opacity: 0; transition: 1s; } .img-container:hover .img2 { opacity: 1; } .img-container img { display: block; position: absolute; width: 100%; height: 100%; object-fit: cover; }

 <div class="img-container"> <img class="img1" src="https://images.unsplash.com/photo-1648737966174-c5ef7b893fcd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" /> <img class="img2" src="https://images.unsplash.com/photo-1654175979772-0f0eaa672d08?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" /> </div>

Answer 2

您可以將 css 樣式添加到 next/image 組件 - 請參閱https://nextjs.org/docs/api-reference/next/image並搜索“CSS 樣式”。

然后就可以使用css3轉場了，這里有很好的描述： CSS3 Transition - Fade out effect

玩得開心 ：）