加载时如何为 Nextjs/Image 添加淡入动画？

如何解决加载时如何为 Nextjs/Image 添加淡入动画？

我正在使用 next/image，效果很好，但实际加载的图像非常刺耳，而且没有动画或淡入。有没有办法实现这一点？我尝试了很多东西，但没有一个奏效。

这是我的代码：

<Image
  src={source}
  alt=""
  layout="responsive"
  width={750}
  height={height}
  className="bg-gray-400"
  loading="eager"
/>

根据 docs，我可以使用 className 道具，但这些道具会立即加载，并且我无法找出在加载后应用类的任何方法。

我也试过 onLoad，根据这张票，它不受支持： https://github.com/vercel/next.js/issues/20368

解决方法

你可以试试用next-placeholder来达到这种效果

,

我想达到同样的目的，因此尝试使用 onLoad 事件。 nextJs 的 Image 组件接受它作为 prop，所以这是我的结果：

const animationVariants = {
    visible: { opacity: 1 },hidden: { opacity: 0 },}

const FadeInImage = props => {
    const [loaded,setLoaded] = useState(false);
    const animationControls = useAnimation();
    useEffect(
        () => {
            if(loaded){
                animationControls.start("visible");
            }
        },[loaded]
    );
    return(
        <motion.div
            initial={"hidden"}
            animate={animationControls}
            variants={animationVariants}
            transition={{ ease: "easeOut",duration: 1 }}
        >
            <Image
                {...p}
                onLoad={() => setLoaded(true)}
            />
        </motion.div>
    );
}

但是，图像并不总是淡入，如果图像尚未缓存，则 onLoad 事件似乎触发得太早。我怀疑这是一个错误，将在未来的 nextJS 版本中修复。如果其他人找到了解决方案，请及时通知我！

然而，上面的解决方案经常有效，并且由于每次都触发 onLoad，它不会破坏任何东西。

编辑：此解决方案使用 framer-motion 来制作动画。这也可以被任何其他动画库或原生 CSS 转换替换