使用ReactJS实现的方块点击翻转动画

React.js Animating flip display

react, card

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4238
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const {
    render
} = ReactDOM;
const {
    Component
} = React;

var digits = {
    '0': [1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1],
    '1': [0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0],
    '2': [1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1],
    '3': [1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1],
    '4': [1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0, 1],
    '5': [1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1],
    '6': [1, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1],
    '7': [1, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1],
    '8': [1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1],
    '9': [1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0, 1]
};

class Display extends Component {
    createTiles() {
        const tiles = [];

for (let i = 0; i < 15; i++) {
            tiles.push( < div className = {
                    this.props.tileMap[i] ? 'TileWrapper TileWrapper--active' : 'TileWrapper'
                } >
                < div className = "Tile" > < /div> < /div>
            );
        }

return tiles;
    }

render() {
        return ( < div className = "Display" > {
            this.createTiles()
        } < /div>);
    }
}

class Container extends Component {
    constructor(props) {
        super(props);

this.state = {
            number: 0
        };
        this.onClick = this.onClick.bind(this);
    }

demo() {
        setTimeout(this.onClick, 1000);
        setTimeout(this.onClick, 2000);
        setTimeout(this.onClick, 3000);
    }

componentDidMount() {
        this.demo();
    }

onClick() {
        this.setState({
            number: (this.state.number + 1) % 10
        });
    }

render() {
        return ( < div onClick = {
                this.onClick
            } >
            < Display tileMap = {
                digits[this.state.number]
            }
            /> < /div>
        );
    }
}

render( < Container / > , document.getElementById('mount-point'));

编译

CSS

html {
    background: #131313;
}
.Display {
    position: relative;
    width: 150px;
    height: 250px;
    -webkit-perspective: 800px;
    perspective: 800px;
}
.Display .TileWrapper {
    position: relative;
    float: left;
    width: 33.33333%;
    height: 20%;
    -webkit-transition: all 1s;
    transition: all 1s;
    cursor: pointer;
}
.Display .TileWrapper .Tile {
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;
    right: 1px;
    box-sizing: border-box;
    background: #2c2c2c;
    -webkit-transition: all 1s;
    transition: all 1s;
}
.Display .TileWrapper--active {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
    z-index: 1;
}
.Display .TileWrapper--active .Tile {
    background: #7b7b7b;
}
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.title {
    position: absolute;
    left: 50%;
    top: -50px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-family: 'Lato', sans-serif;
    color: white;
    line-height: 25px;
    font-size: 25px;
    white-space: nowrap;
}

HTML

React.js Animating flip display

react, card

编辑器支持Emmet

快捷键

React.js Animating flip display

react, card

使用ReactJS实现的六边形彩虹旋转门动画

使用ReactJS和jQuery实现的城市背景平行视差动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：