Javascript Reactjs-flipcard-微调动画和控制

我正在开发一个以React Flipcard模块为特色的应用程序——但我注意到，在某些情况下，用户悬停过快时，Flipcard不会翻转——我尝试将其置于状态——不仅是isFlipped状态，而且是flipping状态——以避免在项目仍在翻转时多次触发翻转——而且我也尝试了有一个超时，可以反转回frontcard，使frontcard返回

是否有办法改进此“动画卡”的质量和流程

import React，{Component}来自'React'；
从“react card flip”导入react card flip；
导入“/FlipIconCard.scss”；
类FlipIconCard扩展组件{
构造函数（）{
超级（）；
此.state={
isFlipped:错误
};
this.handleToggle=this.handleToggle.bind（this）；
this.resetToFront=this.resetToFront.bind（this）；
}
手语（e）{
e、 预防默认值（）；
this.setState（prevState=>（{isFlipped:！prevState.isFlipped}））；
this.setState（{isflipping:true}）；
if（this.state.isflipping）{
设置超时(
函数（）{
this.setState（{isflipping:false}）；
}
.绑定（这个），600
);
}
如果（！this.state.isflipping）{
这个；
}
}
resetToFront（）{
let timer=setTimeout(
函数（）{
if（this.state.isfliped）{
this.setState（{isFlipped:false}）；
clearTimeout（this.state.timer）；
}
}
.绑定（这个），4000
);
this.setState（{timer:timer}）；
}
render（）{
返回(
{this.props.text}
{this.props.label}
);
}
}
导出默认FlipIconCard；

如果有点过于复杂，可以定义一个函数来接收标志并相应地设置状态：

设置翻转（翻转）{
this.setState（{isfliped:fliped}）；
}

在包装器上，注册如下事件：

this.setfliped（false）}
onMouseOver={（）=>this.setFlipped（true）}
>

---

这是右边的

——但是有一个姿势——onMouseLeave不会被触发——因此卡的背面仍然显示forever@TheOldCounty这种情况很少发生，实际上从未发生过。除非用户的光标仍在该卡上。您可以尝试在周围玩，如果光标仍在其上悬停，您将永远无法使牌移动。您的方法出现此问题的原因是因为您在不同的侧面注册了事件。在卡完全翻转之前，无法触发另一侧的

onMouseLeave

。-很好的解决方案--我还想知道是否是上一个状态切换。谢谢-我已经实现了您的解决方案

import React, { Component } from 'react';
import ReactCardFlip from 'react-card-flip';
import './FlipIconCard.scss';

class FlipIconCard extends Component {
    constructor() {
      super();
        this.state = {
        isFlipped: false
      };
      this.handleToggle = this.handleToggle.bind(this);
      this.resetToFront = this.resetToFront.bind(this);
    }

    handleToggle(e) {
      e.preventDefault();
      this.setState(prevState => ({ isFlipped: !prevState.isFlipped }));

      this.setState({ isFlippping: true });
      if(this.state.isFlippping){
        setTimeout(
            function() {
                this.setState({ isFlippping: false });
            }
            .bind(this), 600
        );
      }

      if(!this.state.isFlippping){
        this.resetToFront();
      }
    }

    resetToFront() {
      let timer = setTimeout(
          function() {
            if(this.state.isFlipped) {
              this.setState({ isFlipped: false });
              clearTimeout(this.state.timer);
            }
          }
          .bind(this), 4000
      );
      this.setState({ timer: timer });
    }

    render() {
        return (
          <div className="flip-icon-card">
            <div className="flip-icon-flipper">
              <ReactCardFlip isFlipped={this.state.isFlipped} flipDirection="horizontal">
                <div onMouseOver={this.handleToggle}>
                  <div className="flip-card-contents"><img className="icon-badge" src={require('../../../img/icons/'+this.props.icon)} alt="" /></div>
                </div>         
                <div onMouseLeave={this.handleToggle}>
                  <div className="flip-card-contents backcard"><div className="element">{this.props.text}</div></div>
                </div>
              </ReactCardFlip>
            </div>
            <div>{this.props.label}</div>
          </div>
        );
    }
}

export default FlipIconCard;