React-lazy-load-image-component: how to add a transition?

Question

I have a list of images made with React-lazy-load-component library, it works very well, but I can't have any transition effect, as promised by the documentation.

Here is my code:

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"
      />

Since importing the css file doesn't work, I have directly written the css source code in my styled-component. With no success so far.

How to fix this?

score 0 · Answer 1 · answered Aug 06 '20 at 14:08

You should move transition to scope before it's loaded. Consider trying this code.

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;        
  }
`;

React-lazy-load-image-component: how to add a transition?

1 Answers1