Javascript 设置状态后，React css webkit动画不起作用

当我使用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>
        )
    }
});

从“React”导入React；
导入“/App.css”；
var createReactClass=require（'create-react-class'）；
var GameBoard=createReactClass({
getInitialState（）{
返回{
游戏状态：0，
heroLoc:0，
enemyLoc:0，
enemyType:0，
}
},
游戏开始（）{
这是我的国家({
游戏状态：1
})
这个；
},
changeEnemyType（）{
var type=Math.floor（Math.random（）*3）；
var loc=Math.round（Math.random（））；
this.setState（{enemyLoc:loc}）；
this.setState（{enemyType:type}）；
},
创建敌人（）{
setInterval（this.changenemyType，1000）；
},
render（）{
var state=this.state
var enemyCls=state.gameState？（“敌方”+state.enemyType+“loc”+state.enemyLoc）：“敌方”；
返回(
开始
)
}
});

---

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

我建议这是css的问题，而不是

React

。您缺少的是

动画迭代计数的值

您可以将
无限
添加到
-webkit动画
规则中，使其工作


-webkit动画：敌人1s线性向前无限；

有关
动画的更多信息可以在此处找到：
这不是react渲染方法的问题。。基本上，css动画只有在添加
infinte
值时才能连续工作。。。在您的情况下，初始类是“敌方”，单击开始后，它将更改为类似以下内容-->“
敌方enemy1 loc0
”
数字可能会根据
math.random（）
的不同而变化，由于您的类名已更改，它将尝试添加上述类
enemy1
loc0
中的属性，因为
enemy1
和
loc0
不在您的css中，因此它不会添加任何内容并进入您的
enemy1
类，中的属性已经添加，因此不会再次添加
更改css类
-webkit动画：敌人1s线性向前在
中。敌人

并将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);}
}

谢谢！现在可以了。我被困在为什么css没有再次渲染和播放动画，但意识到这种风格没有改变，所以即使html类发生变化，它也会保持不变。谢谢你的回答和建议！当我在.friend中添加“无限”after-webkit动画时，我发现它是有效的。