依次闪烁元素

Question

美好的一天，所有，所以我正在做这个事情，我有4个正方形，当我单击一个按钮时，3个随机正方形必须按顺序以不同的颜色闪烁。 而且我需要存储在数组中闪烁的正方形的ID。 我不知道的是如何让他们一个接一个地眨眼。 这就是我到目前为止所拥有的... https://codepen.io/anon/pen/dmBxYe?editors=0110

class App extends React.Component {
constructor() {
    super();

    this.state = {
        colors: ['yellow', 'red', 'blue', 'green'],
        quantity: 3,
    }
}
start() {
    const {quantity} = this.state;
    const quantityArray = Array.from(Array(quantity));
    const pieces = Array.from(document.querySelectorAll('.game-piece')); 

    quantityArray.forEach((item, i) => {
      setTimeout(() => {    
        pieces[i].classList.toggle(`${this.state.colors[i]}`);
      }, i * 500); // we're passing x
      setTimeout(() => {
        pieces[i].classList.toggle(`${this.state.colors[i]}`);
      }, 700 * (i))
    });
}
render() {
    return (
        <div className="memory-game">
            {this.state.colors.map((gamePiece, i) => {
                return <div key={`gamePiece-${i}`} className="game-piece"></div>
            })}

            <button onClick={this.start.bind(this)} className="start-game">Start the game</button>
        </div>
    )
}
}

React.render(<App />, document.getElementById('app'));

Answer 1

您可以尝试如下操作：

• 创建基于递归的循环机制。
• 接受将启动下一个调用的回调，并根据条件在循环内调用它。

以下是一个动画功能。 它添加类并在指定时间后将其删除。

如果可用，它也会调用回调。 因此，在终止情况下，调用方的职责是不传递回调。

animate(element, className, callback) {
  setTimeout(() => {
    element.classList.toggle(className);
    setTimeout(() => {
      element.classList.toggle(className);
      if (callback) callback();
    }, 200)
  }, 500); // we're passing x
}

一个简单的基于递归的循环，如果元素和颜色存在，则调用自身。 您可以根据需要更新条件。

const scheduleAnimation = (i) => {
  const element = pieces[i];
  const color = this.state.colors[i];
  if (element && color) {
    this.animate(element, color, scheduleAnimation.bind(this, ++i));
  }
}
scheduleAnimation(0);

更新的代码笔

Answer 2

这是一件有趣的事情。 这是您可以在React setState和JS setTimeouts的帮助下完成的工作。

 class App extends React.Component { constructor() { super(); this.state = { colors: ["yellow", "red", "blue", "green"], quantity: 3, output: [], currentIndex: -1 }; } getRandomInt() { return Math.floor(Math.random() * Math.floor(4)); } generateNumbers() { const output = []; while (output.length !== 3) { const generatedNumber = this.getRandomInt(); if (!output.includes(generatedNumber)) { output.push(generatedNumber); } } return output; } start() { const output = this.generateNumbers(); this.setState({ output: output }, () => { output.forEach((item, index) => { setTimeout(() => { this.setState({ currentIndex: item }); }, index * 1000); }); }); } render() { return ( <div className="memory-game"> {this.state.colors.map((gamePiece, i) => { let customClass = ""; if (i === this.state.currentIndex) { const css = this.state.colors[this.state.currentIndex] ? this.state.colors[this.state.currentIndex] : ""; if (css) { customClass = `blink-${css}`; } } return ( <div key={`gamePiece-${i}`} className={`game-piece ${customClass}`} /> ); })} <button onClick={this.start.bind(this)} className="start-game"> Start the game </button> </div> ); } } ReactDOM.render(<App />, document.getElementById("app")); 

 html, body { width: 100%; height: 100%; } #app { width: 100%; height: 100%; display: table; background: lightgoldenrodyellow; } .memory-game { width: 40%; margin: 100px auto; } .game-piece { width: 50%; height: 40px; display: inline-block; border-radius: 10px; margin-bottom: 10px; background-color: lightgray; &:nth-child(2n + 1) { margin-right: 10px; } } .start-game { margin: 0 auto; background: red; color: white; border: none; display: block; padding: 10px 15px; border-radius: 5px; } @-webkit-keyframes blinker-red { 0% { opacity: 0; background-color: red; } 50%{ opacity:1; } 100%{ opacity: 0; } } @-webkit-keyframes blinker-yellow { 0% { opacity: 0; background-color: yellow; } 50%{ opacity:1; } 100%{ opacity: 0; } } @-webkit-keyframes blinker-green { 0% { opacity: 0; background-color: green; } 50%{ opacity:1; } 100%{ opacity: 0; } } @-webkit-keyframes blinker-blue { 0% { opacity: 0; background-color: blue; } 50%{ opacity:1; } 100%{ opacity: 0; } } .blink-red { text-decoration: blink; animation-name: blinker-red; animation-duration: 1s; animation-timing-function: ease-in-out; } .blink-green { text-decoration: blink; animation-name: blinker-green; animation-duration: 1s; } .blink-blue { text-decoration: blink; animation-name: blinker-blue; animation-duration: 1s; } .blink-yellow { text-decoration: blink; animation-name: blinker-yellow; animation-duration: 1s; } .blink-red { text-decoration: blink; animation-name: blinker-red; animation-duration: 1s; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>