Как анимировать коллекцию элементов, используя реагирующее состояние без clickkevent? - PullRequest
Новая
       29

Как анимировать коллекцию элементов, используя реагирующее состояние без clickkevent?

0 голосов
/ 18 сентября 2018

У меня есть список коллекций, таких как: 

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        "https://images.unsplash.com/photo...",
        "https://images.unsplash.com/photo...",
        "https://images.unsplash.com/photo...",
        "https://images.unsplash.com/photo...",
        "https://images.unsplash.com/photo...",
        "https://images.unsplash.com/photo...",
      ]
    };
  }
}

Эти коллекции являются полноэкранными изображениями, которые я хотел бы их оживить.Проблема в том, что я пытаюсь анимировать их без какого-либо события щелчка (больше похоже на цикл), и я хочу, чтобы оно анимировалось бесконечно.

Это то, что у меня так далеко: 

  render() {

    const items = this.state.items.map((item, i) => {
      if (i === this.state.show) {
        return (
            <img src={item} alt="" className="bg" key={i}/>
        )
      } else {
        return null
      }
    });

    return (
      <div className="App">
        <div className="container">
          <div className="arrow" onClick={this.next}><ArrowLeft/></div>
          <div className="img-container">
            <ReactCSSTransitionGroup
                transitionName={this.state.slideDirection}
                transitionEnterTimeout={0}
                transitionLeaveTimeout={0}
            >
              {items}
            </ReactCSSTransitionGroup>
          </div>
          <div className="arrow" onClick={this.prev}><ArrowRight/></div>
        </div>
      </div>
    );
  }
...