如何使用动画更改 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

玩得开心 ：）