手机上的翻页卡-第一次点击不起作用

如何解决手机上的翻页卡-第一次点击不起作用

在Next.js中工作。当前正在尝试调试我正在处理的网站的移动版本。只是有一个小小的障碍，在手机中窃取的第一张翻盖纸牌就不会翻盖。如果我多次点击此“顽固”卡，它将选择卡另一侧的文本。如果我点击另一张卡，它会正确翻转。我先轻按哪张卡都没关系，结果是最初轻按的卡不会翻转（直到我轻按其他卡并再试一次）。这是一个非常令人困惑的问题，我什至希望您有个开始使用的指导。网站当前运行在d20dev.com

class SoloContent1 extends React.Component {


constructor(props) {
    super(props);

this.state={
  className1: "flipCard",className2: "flipCard",className3: "flipCard",fadeOneA: "unFade",fadeOneB: "fade",fadeTwoA: "unFade",fadeTwoB: "fade",fadeThreeA: "unFade",fadeThreeB: "fade",}

this.flip1 = this.flip1.bind(this);
this.unflip1 = this.unflip1.bind(this);
this.flip2 = this.flip2.bind(this);
this.unflip2 = this.unflip2.bind(this);
this.flip3 = this.flip3.bind(this);
this.unflip3 = this.unflip3.bind(this);
}

flip1() {
  this.setState({ className1 : "flipCard is-flipped",fadeOneA : "fade",fadeOneB : "unFade" })
}

unflip1() {
  this.setState({ className1 : "flipCard",fadeOneA : "unFade",fadeOneB : "fade" })
}

flip2() {
  this.setState({ className2 : "flipCard is-flipped",fadeTwoA : "fade",fadeTwoB : "unFade" })
}

unflip2() {
  this.setState({ className2 : "flipCard",fadeTwoA : "unFade",fadeTwoB : "fade" })
}

flip3() {
  this.setState({ className3 : "flipCard is-flipped",fadeThreeA : "fade",fadeThreeB : "unFade" })
}

unflip3() {
  this.setState({ className3 : "flipCard",fadeThreeA : "unFade",fadeThreeB : "fade" })
}


render() {

  return (
    <div id="contentContainer">
          <div className="contentCanvas contentCanvas--card">

<div className="contentCanvas contentCanvas--card">
              <div className="flipCardContainer" id="flipContainer1" onMouseEnter={this.flip1} onMouseLeave={this.unflip1}>
                <div className={this.state.className1}  id="card1">
                    <div className="card__face card__face--front" id={this.state.fadeOneA} 
                    style={{
                      backgroundImage: "url(" + `${require("../public/assets/JPG.jpg")}` + ")",width: "100%",height:"100%",backgroundRepeat: "no-repeat",backgroundSize: "cover",backgroundPosition: "center",}}
                    >
                    </div>
                    <div className="card__face card__face--back" id={this.state.fadeOneB}>
                      <div style={{
                        backgroundImage: "url(" + `${require("../public/assets/JPG.jpg")}` + ")",filter: "blur(20px)",}}>
                      </div>
                      <p className="cardText" id="cardText1">TEXT</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>


.cardText {
                position: absolute;
                height: 100%;
                width: 80%;
                transform: translateY(-105%);
              }

              #cardText1 {
                text-align: right;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                width: 75%;
                color: white;
                font-size: calc(12px + 1.3vw);
                text-shadow: 2px 2px 2px black;
              }

              #cardText2 {
                text-align: center;
                width: 90%;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                color: white;
                font-size: calc(12px + 1.3vw);
                text-shadow: 2px 2px 2px black;
              }

              #cardText3 {
                text-align: left;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                width: 75%;
                color: white;
                font-size: calc(12px + 1.1vw);
                text-shadow: 2px 2px 2px black;
              }
            
              #contentContainer {
                position: absolute;
                height: 100%;
                width: 100%;
                background-image: url('image');
                background-color: rgb(192,192,192);
                border-radius: 8px;
                transform: translateX(-225%);
                overflow: hidden;
                border: 5px solid silver;
                box-sizing: border-box;
              }
            
              .contentCanvas {
                z-index: 1;
                height: 100%;
                width: 100%;
                margin: auto;
                margin-top: 0%;
              }
            
              .flipCard {
                margin: auto;
                list-style: none;
                font-size: 1.6em;
                width: 100%;
                height: 100%;
                padding: 0;
                display: inline-block;
                transition: transform 0.5s;
                transform-style: preserve-3d;
                position: relative;
                cursor: pointer;
                
              }
            
              .card__face {
                position: absolute;
                height: 100%;
                width: 100%;
                
                text-align: center;
              }

              .card__face--front {
                background: white;
                overflow: hidden;
              }

              .card__face--back {
                background: black;
                transform: rotateY( 180deg );
                overflow: hidden;
              }

              .flipCard.is-flipped {
                transform: rotateY( 180deg );
              }

              #card1 {
                
              }

              .flipCardContainer {
                perspective: 40rem;
                z-index: 1;
                height: 100%;
                width: 33.333333333333333333333333%;
                margin: auto;
                display: inline-block;
               
              }
              

解决方法

对我来说，问题出在事件监听器上。而不是 鼠标进入/离开，在移动时应该具有一个功能 onClick。然后，您需要更改当前代码或添加 额外的toggleFlip（）函数可使其正常工作。 –AurélienB。

答案中的所有功劳归于上述评论中的AurélienB.。