Эффект FadeIn с CSSTransition для изображений React LazyLoaded - PullRequest
Новая
       8

Эффект FadeIn с CSSTransition для изображений React LazyLoaded

0 голосов
/ 12 февраля 2019

Я пытаюсь реализовать свой эффект затухания для моих лениво загруженных компонентов, но безрезультатно.Я подписан на этот пост .У меня проблема в том, что элемент CSSTransition условно отображает изображение в зависимости от текущего состояния.Если я предварительно установлю state.loaded в false, он никогда не вызовет своих потомков (которые, в свою очередь, вернут изображение и установят для state.loaded значение true).Это изменение состояния необходимо для запуска анимации.Я в недоумении, как это исправить ...

Код здесь на Код Песочница 

class FadeIn extends React.Component {
  state = { loaded: false };

  onLoad = () => {
    this.setState({ loaded: true });
    // () => console.log(this.state))
  };

  render() {
    return (
      <LazyLoad throttle={2000} height={200} key={Math.random()}>
        <CSSTransition
          in={this.state.loaded}
          timeout={350}
          classNames="fade"
          unmountOnExit
        >
          {state => {
            console.log(state);
            return <div>{this.props.children(this.onLoad)}</div>;
          }}
        </CSSTransition>
      </LazyLoad>
    );
  }
}

class App extends React.Component {
  url =
    "https://images.unsplash.com/photo-1549773361-99a3f9af88fe?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ";
  state = {
    images: Array(30).fill(this.url)
  };

  componentDidMount() {}

  renderImages = () => {
    return this.state.images.map(url => {
      return (
        <FadeIn key={Math.random()}>
          {onLoad => (
            <img src={this.url} key={String(Math.random())} onLoad={onLoad} />
          )}
        </FadeIn>
      );
    });
  };

  render() {
    return <div className="list">{this.renderImages()}</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
...