Javascript 如何在react中取消和重置css动画？ 我想做什么

我有一个精灵表，我用它做一些简单的动画。我有一个有两个动画的“播放器”。一个用于进攻，一个用于站立。当前行为如下：“站立”是默认动画。单击播放器时，将播放“攻击”动画并切换回“站立”

对于在攻击时单击播放器的特殊情况，我希望动画“攻击”动画重置

我的代码

//React组件
类播放器扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
超时：空
};
}
攻击（e）{
if（this.state.timeout）{clearTimeout（this.state.timeout）；}
变量$el=$（即目标）；
$el.css({
背景位置：“0 220px”，
animationName:'攻击'，
宽度：“300px”
});
this.state.timeout=setTimeout（函数（）{
$el.css({
背景位置：'左上'，
animationName:'站立'，
宽度：'250px'
});
}, 2000);
}
渲染（）{
返回(
{this.props.name}
);
}
}
/*css*/
.玩家{
宽度：250px；
高度：220px；
背景：url（'assets/player.png'）左上方；
动画：站立1.2s步（3）无限；
动画方向：交替；
}
@关键帧站{
100% { 
背景位置：-750px 0；
}
}
@关键帧攻击{
100% { 
背景位置：-900px 220px；
}
}

我想做什么 我知道，由于我设置了“站立”动画超时，我将不得不取消它，并在“站立”动画之后创建一个新的设置超时。然而，它看起来仍然有点时髦。我尝试使用forceUpdate（）查看是否可以重新启动并重置所有内容，然后启动“攻击”动画，但它似乎没有任何作用

---

我有另一个想法，使用jquery删除并重新附加dom元素，但我觉得它会变得很混乱，我相信我可能以错误的方式处理这个问题。你们有什么想法吗？

对于复杂的动画，你们可以使用可以从中学习和

对于简单的类，我宁愿从元素中添加和删除类来启用动画并重置它

如果我理解正确，那么您在react内部使用jQuery。为了更新CSS，您不应该在react中使用它

在react中使用jQuery应该有更有力的理由，因为在react中更新内联css非常简单

以下是我尝试的方法：

//React组件
类播放器扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
方向：空，
超时：空
};
}
攻击（e）{
//以下行可用于识别多个目标
//设target=（e.target）；
if（this.state.timeout！==null）{
window.clearTimeout（this.state.timeout）
}
let timeout=setTimeout（（）=>{
这是我的国家({
方向：空，
超时：空
});
}, 8000)
设方向为空；
如果（e.ctrlKey）{
方向='逆时针'
}否则{
方向='顺时针'
}
if（this.state.direction！==方向）{
这是我的国家({
方向，超时
});
}
}
render（）{
让classNames=[“player”，“main”]；
让样式={}
if（this.state.direction！==null）{
如果（this.state.direction===‘顺时针’）
styles.zoom=0.8
其他的
styles.zoom=1.2
classNames.push（this.state.direction）
}
返回（
 {
这是我的名字
}
);
}
}
ReactDOM.render（，document.getElementById（'game'））
.player{
宽度：100px；
高度：100px；
利润率：50像素；
缩放：1；
过渡：全线性0.3s；
显示：内联块；
背景色：#ccc；
动画计时功能：线性；
}
.顺时针{
动画：顺时针5s无限；
}
.逆时针{
动画：逆时针5s无限；
}
@顺时针方向的关键帧{
0% {
变换：旋转（0度）
}
50% {
变换：旋转（180度）
}
100% {
变换：旋转（360度）
}
}
@逆时针方向的关键帧{
0% {
变换：旋转（360度）
}
50% {
变换：旋转（180度）
}
100% {
变换：旋转（0度）
}
}

哦，谢谢！它看起来很简单；我真希望我能想到这一点。我还没有测试过，但我相信这会奏效。如果我认真对待动画，我会确保查看这些资源。在上面的示例中，按住ctrl键并单击以进行逆时针旋转。非常感谢向上投票。一旦我得到15个代表，我将尝试向上投票。当我按住ctrl键并单击时，这个示例似乎对我不起作用。它在运行chrome的mac浏览器上工作吗？此外，添加和删除类不会重置动画。这就是为什么我考虑使用jquery删除并将其添加回dom。这里有一个例子，我在windows机器上写下了答案；虽然只需点击方框进行顺时针旋转。在同一页面中，他们建议通过
void元素进行回流。offsetWidth
和rest与添加和删除类相同。此重放也可在上述代码中使用
void e.target.offsetWidth
// React Component
class Player extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      timeout: null
    };
  }

  attack(e) {
    if (this.state.timeout) { clearTimeout(this.state.timeout); } 
    var $el = $(e.target);
    $el.css({
      backgroundPosition: '0 220px',
      animationName: 'attack',
      width: '300px'
    });
    this.state.timeout = setTimeout(function() {
      $el.css({
        backgroundPosition: 'left top',
        animationName: 'stand',
        width: '250px'
      });
    }, 2000);
  }

  render () {
    return (
      <div onClick={this.attack.bind(this)} className="player main">{this.props.name}</div>
    );
  }
}


     /* The css */
     .player {
        width: 250px;
        height: 220px;
        background: url('assets/player.png') left top;
        animation: stand 1.2s steps(3) infinite;
        animation-direction: alternate;
      }
      @keyframes stand {
        100% { 
          background-position: -750px 0; 
        }
      }
      @keyframes attack {
        100% { 
          background-position: -900px 220px; 
        }
      }