React懒惰加载镜像组件:如何添加转换

Question

我有一个用React懒惰加载组件库制作的图像列表，它运行得很好，但我不能像文档中承诺的那样产生任何过渡效果。

这是我的代码：

const LazyPicture = styled(LazyLoadImage)`
object-fit: cover;
width: ${({ width }) => (width ? `${width}px` : "100%")};
height: ${({ width }) => (width ? `${width}px` : "100%")};
&.lazy-load-image-background.opacity {
background-image: none !important;
opacity: 0;
}
&.lazy-load-image-background.opacity.lazy-load-image-loaded {
opacity: 1;
transition: opacity .3s;
}
`;       

//(...)

<LazyPicture
src={image}
width={width}
height={height}
effect="opacity"
/>

由于导入css文件不起作用，我直接在我的样式组件中编写了css源代码。到目前为止没有成功。

如何解决此问题？

Answer 1

您应该在加载转换之前将其移动到作用域。请考虑试用此代码。

const LazyPicture = styled(LazyLoadImage)`
object-fit: cover;
width: ${({ width }) => (width ? `${width}px` : "100%")};
height: ${({ width }) => (width ? `${width}px` : "100%")};

&.lazy-load-image-background.opacity {
background-image: none !important;
opacity: 0;
transition: opacity .3s;        
}
&.lazy-load-image-background.opacity.lazy-load-image-loaded {
opacity: 1;        
}
`;