React-lazy-load-image-component：如何添加过渡？答案

【问题标题】：React-lazy-load-image-component: how to add a transition?React-lazy-load-image-component：如何添加过渡？
【发布时间】：2020-05-06 13:53:50
【问题描述】：

我有一个使用 React-lazy-load-component 库制作的图像列表，它工作得很好，但我不能有任何过渡效果，正如文档所承诺的那样。

这是我的代码：

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文件不起作用，所以我直接在我的styled-component中编写了css源代码。到目前为止没有成功。

如何解决这个问题？

【问题讨论】：

标签： reactjs lazy-loading styled-components react-lazy-load

【解决方案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;        
  }
`;

【讨论】：