React-lazy-load-image-component: как добавить переход?

Question

У меня есть список изображений, созданных с помощью библиотеки 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 не работает, я напрямую написал исходный код 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;        
  }
`;