在setState之后，React css webkit动画无效

Question

当我使用setState函数时，似乎渲染函数工作和html更改。但是，css webkit动画不会再次播放并停在最终位置。这是我的CSS代码

.enemy{
    width: 80px;
    height: 160px;
    position: absolute;
    top: 0px;
    -webkit-animation:enemy 1s linear forwards;
}

@-webkit-keyframes enemy{
    100%{ -webkit-transform:translateY(1000px);}
}

这是我的JSX代码：

import React from 'react';
import './App.css';

var createReactClass = require('create-react-class');

var GameBoard = createReactClass({
    getInitialState() {
        return {
            gameState: 0,
            heroLoc: 0,
            enemyLoc: 0,
            enemyType : 0,
        }
    },

    gameStart() {
        this.setState({
            gameState: 1
        })
        this.createEnemy();
    },

    changeEnemyType(){
        var type = Math.floor(Math.random()*3);
        var loc = Math.round(Math.random());
        this.setState({enemyLoc : loc});
        this.setState({enemyType : type});
    },

    createEnemy(){
        setInterval(this.changeEnemyType, 1000);
    },

    render() {
        var state = this.state
        var enemyCls = state.gameState? ("enemy enemy"+ state.enemyType  + " loc" + state.enemyLoc):"enemy";
        return (
            <div className = "board" >
                <div className="road">
                    <div className={enemyCls} id="enemy"></div>
                </div>
                <span className = { state.gameState? "start hide":"start" } onClick = { this.gameStart }> Start </span>
            </div>
        )
    }
});

当我点击游戏开始底部时，敌人的类每秒都会改变，但是css动画不会重放，所以我不能使用EventListener来检测“webkitAnimationEnd”。

Answer 1

我建议你的css问题而不是React。你错过的是animation-iteration-count的价值。

您可以通过将infinite添加到-webkit-animation规则来使其工作。

-webkit-animation:enemy 1s linear forwards infinite;

有关animation的更多信息，请访问：https://www.w3schools.com/cssref/css3_pr_animation.asp

Answer 2

这不是反应渲染方法的问题。基本上，只有当你添加infinte值时，css动画才能连续工作......在你的情况下，初始类是“敌人”，点击开始后它会变成像这个 - >“enemy enemy1 loc0”数字可能会根据math.random()而改变，因为你的类名被更改它将尝试添加上面的类enemy enemy1 loc0的属性，因为enemy1和loc0不存在于你的css因此它不会添加什么和来到你的enemy类，其中的属性已添加，所以它不会再添加

Answer 3

在-webkit-animation:enemy 1s linear forwards;中更改你的css类.enemy

并用这个替换你的css：

.enemy{
    width: 80px;
    height: 160px;
    position: absolute;
    top: 0px;
    left: 100px;
    background: #ccc;     
}
.enemy0{
    -webkit-animation: enemy 1s linear forwards infinite;
}
@-webkit-keyframes enemy{
    100%{ -webkit-transform:translateY(1000px);}
}

working demo