Question

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

Angular 1.x

这是我的JSX代码：

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

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

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

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动画才能连续工作......在你的情况下，初始类是＆＃34;敌人＆＃34;点击开始后，它将变为这样的 - ＆gt; ＆＃34; enemy enemy1 loc0＆＃34; 这些数字可能会因math.random()而改变，因为您的班级名称已更改，因此我会尝试添加上述班级enemy enemy1 loc0中的属性，因为enemy1并且您的css中不存在loc0因此它不会添加任何内容并进入您的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

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

3 个答案: