[英]Blink elements in sequence
美好的一天,所有,所以我正在做這個事情,我有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'));
您可以嘗試如下操作:
以下是一個動畫功能。 它添加類並在指定時間后將其刪除。
如果可用,它也會調用回調。 因此,在終止情況下,調用方的職責是不傳遞回調。
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);
這是一件有趣的事情。 這是您可以在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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.