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

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

0 голосов
/ 06 мая 2020

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

Как это исправить?

1 Ответ

0 голосов
/ 06 августа 2020

Вы должны переместить переход в область видимости до его загрузки. Попробуйте этот код. 

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