Reactjs-翻页卡-优化动画和控件

问题描述

我正在开发一个具有React Flipcard模块功能的应用程序-但是我注意到在某些情况下，如果用户悬停得太快，该翻转卡将不会向后翻转-我试图进入状态-而不是只是isFlipped-但处于翻转状态-因此，如果该项目仍在翻转，则避免了多次触发翻转---但是我也有一个超时时间可以反向切换回前卡，从而使前面板返回。

有没有一种方法可以改善这种活动挂图的质量和流程。

https://codesandbox.io/s/proud-morning-duo0k?file=/src/FlipIconCard.js

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;

解决方法

有点复杂，您可以定义一个接收标志的函数并相应地设置状态：

setFlipped(flipped) {
  this.setState({ isFlipped: flipped });
}

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

<div
  className="flip-icon-flipper"
  onMouseLeave={() => this.setFlipped(false)}
  onMouseOver={() => this.setFlipped(true)}
>

这里是working example

javascript reactjs reactjs