Question

我在React GitHub

中制作了骰子滚动应用程序

一切正常，但有时当我掷骰子随机函数返回与之前相同的数字时，我无法弄清楚如何制作一些简单的骰子滚动动画，因此当掷骰子和数字时它是可区分的和以前一样。

您可以查看有效的应用here

我发送外部道具，以显示基于收到的数字骰子的功能。

import React, { Component } from 'react';
import './dice.css';
class Dice extends Component {

    constructor() {
        super();
    }

    render() {
        return(
            <div>
                {this.diceFace()}
            </div>
        );
    }

    //runs CSS function depending on random number recieved
    diceFace = () => {
        switch(this.props.random) {
            case 1:
                return this.one();
            case 2:
                return this.two();
            case 3:
                return this.three();
            case 4:
                return this.four();
            case 5:
                return this.fiwe();
            case 6:
                return this.six();
            default:
                alert("smthing wrong")
        }
    }

    //********************************
    //CSS for dice faces
    //********************************

    one = () => {
        return(
            <div class="first-face">
                <span class="pip"></span>
            </div>
        )
    }

    two = () => {
        return(
            <div class="second-face">
                <span class="pip"></span>
                <span class="pip"></span>
            </div>
        )
    }

    three = () => {
        return(
            <div class="third-face">
                <span class="pip"></span>
                <span class="pip"></span>
                <span class="pip"></span>
            </div>
        )
    }

    four = () => {
        return(
            <div class="fourth-face">
                <div class="column">
                    <span class="pip"></span>
                    <span class="pip"></span>
                </div>
                <div class="column">
                    <span class="pip"></span>
                    <span class="pip"></span>
                </div>
            </div>
        )
    }

    fiwe = () => {
        return(
            <div class="fifth-face">
                <div class="column">
                    <span class="pip"></span>
                    <span class="pip"></span>
                </div>
                <div class="column">
                    <span class="pip"></span>
                </div>
                <div class="column">
                    <span class="pip"></span>
                    <span class="pip"></span>
                </div>
            </div>
        )
    }

    six = () => {
        return(
            <div class="sixth-face">
                <div class="column">
                    <span class="pip"></span>
                    <span class="pip"></span>
                    <span class="pip"></span>
                </div>
                <div class="column">
                    <span class="pip"></span>
                    <span class="pip"></span>
                    <span class="pip"></span>
                </div>
            </div>
        )
    }


}


export default Dice;

Answer 1

您可以使用动画让用户更好地了解骰子已经滚动。我认为，在React上实现动画的最直接方式之一是通过名为react-flip-move的npm包。您可以使用React Component将div element或FlipMove包裹起来。例如;

render() {
        return(
            <FlipMove>
                {this.diceFace()}
            </FlipMove>
        );
    }

但是，您可以实现其他动画方式。

骰子滚动画

1 个答案: