Создание анимации для игрового автомата basi c React

Question

Я новичок в реакции, и мой первый мини-проект - простой игровой автомат. В настоящее время я завершил logi c для отображения случайных смайликов после нажатия кнопки. Следующим шагом для меня перед стилизацией и добавлением logi c для выигрыша / проигрыша и счетчика монет et c является добавление анимации.

https://codepen.io/fmressel/pen/vRLerN

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

Любая помощь очень ценится!

import React, { Component } from 'react'
import Contents from './Contents'
import './mainslots.css'


class Slots extends Component {
    static defaultProps = {
        fruits: ["?", "?", "?", "?", "?", "?"]
    };

    

    constructor(props) {
        super(props);
        this.state = {fruit1: '?', fruit2: '?', fruit3: '?', rolling: false};
        this.roll = this.roll.bind(this);
    };

    roll = () => {
        const dFruit1 = this.props.fruits[
            Math.floor(Math.random() * this.props.fruits.length)
        ];
        const dFruit2 = this.props.fruits[    
            Math.floor(Math.random() * this.props.fruits.length)
        ];

        const dFruit3 = this.props.fruits[    
            Math.floor(Math.random() * this.props.fruits.length)
        ];


        this.setState({fruit1: dFruit1, fruit2: dFruit2, fruit3: dFruit3, rolling: true});
        setTimeout(() => {
            this.setState({ rolling: false });
        }, 700)
    }
    

    render(){
        return(
            <div className="SlotMachine">
                <div className="SlotsContainer">
                {this.state.fruit1}
                {this.state.fruit2}
                {this.state.fruit3}
                </div>

                <button className="spinner" onClick={this.roll} disabled={this.state.rolling}>
                {this.state.rolling ? "Spinning..." : "Spin"}
                </button>
            </div>
        );
    }
}

export default Slots;

import React, { Component } from 'react'

class Contents extends Component {

    Fruits = ["?", "?", "?", "?", "?", "?"];


    render() {
        return(
            <div className="emptys">
                {this.props.roll}

            </div>
        )
    }
}

export default Contents

Answer 1

Вот go,

Было весело разрабатывать :), вы можете запустить приведенный ниже фрагмент кода для просмотра, и я добавил комментарии в код, которые прояснят ситуацию, пожалуйста посмотрите,

Надеюсь, это поможет,

const { createRef , Component } = React;

class Slots extends Component {
  static defaultProps = {
    fruits: ["?", "?", "?", "?", "?", "?"]
  };

  constructor(props) {
    super(props);
    this.state = { fruit1: "?", fruit2: "?", fruit3: "?", rolling: false };

    // get ref of dic onn which elements will roll
    this.slotRef = [createRef(), createRef(), createRef()];
  }

  // to trigger roolling and maintain state
  roll = () => {
    this.setState({
      rolling: true
    });
    setTimeout(() => {
      this.setState({ rolling: false });
    }, 700);

    // looping through all 3 slots to start rolling
    this.slotRef.forEach((slot, i) => {
      // this will trigger rolling effect
      const selected = this.triggerSlotRotation(slot.current);
      this.setState({ [`fruit${i + 1}`]: selected });
    });

  };

  // this will create a rolling effect and return random selected option
  triggerSlotRotation = ref => {
    function setTop(top) {
      ref.style.top = `${top}px`;
    }
    let options = ref.children;
    let randomOption = Math.floor(
      Math.random() * Slots.defaultProps.fruits.length
    );
    let choosenOption = options[randomOption];
    setTop(-choosenOption.offsetTop + 2);
    return Slots.defaultProps.fruits[randomOption];
  };

  render() {
    return (
      <div className="SlotMachine">
        <div className="slot">
          <section>
            <div className="container" ref={this.slotRef[0]}>
              {Slots.defaultProps.fruits.map((fruit, i) => (
                <div key={i}>
                  <span>{fruit}</span>
                </div>
              ))}
            </div>
          </section>
        </div>
        <div className="slot">
          <section>
            <div className="container" ref={this.slotRef[1]}>
              {Slots.defaultProps.fruits.map(fruit => (
                <div>
                  <span>{fruit}</span>
                </div>
              ))}
            </div>
          </section>
        </div>
        <div className="slot">
          <section>
            <div className="container" ref={this.slotRef[2]}>
              {Slots.defaultProps.fruits.map(fruit => (
                <div>
                  <span>{fruit}</span>
                </div>
              ))}
            </div>
          </section>
        </div>
        <div
          className={!this.state.rolling ? "roll rolling" : "roll"}
          onClick={!this.state.rolling && this.roll}
          disabled={this.state.rolling}
        >
          {this.state.rolling ? "Rolling..." : "ROLL"}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Slots />, document.getElementById('react-root'));

.App {
  font-family: sans-serif;
  text-align: center;
}

.slot {
  position: relative;
  display: inline-block;
  height: 100px;
  width: 80px;
}

section {
  position: absolute;
  border-radius: 15px !important;
  border: 3px solid black !important;
  width: 70px;
  height: 70px;
  overflow: hidden;
  background-color: grey;
  border-radius: 2px;
  border: 1px solid lightgrey;
  color: white;
  font-family: sans-serif;
  text-align: center;
  font-size: 25px;
  line-height: 60px;
  cursor: default;
}

.container {
  position: absolute;
  top: 2px;
  width: 100%;
  transition: top ease-in-out 0.5s;
  text-align: center;
}

.roll {
  width: 215px;
  cursor: pointer;
  background-color: yellow;
  padding: 10px;
  text-align: center;
  font-size: 20px;
  border-radius: 20px;
  border: 3px solid black;
}

.rolling {
  animation: blinkingText 1.2s infinite;
}

@keyframes blinkingText {
  0% {
    color: #000;
  }
  49% {
    color: #000;
  }
  60% {
    color: transparent;
  }
  99% {
    color: transparent;
  }
  100% {
    color: #000;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>