手机上的 Flipcard - 第一次点击不起作用

Question

在 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")}` + ")",
                        width: "100%",
                        height:"100%",
                        backgroundRepeat: "no-repeat",
                        backgroundPosition: "center",
                        backgroundSize: "cover",
                        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;
               
              }

Answer 1

To me the problem comes from the event listener. Instead of having mouseenter/leave, when being on mobile you should have a function onClick. Then you would need to either change your current code or add an extra toggleFlip() function to make it work nicely. – Aurélien B.

答案的所有功劳都归功于上面评论中的 Aurélien B.

手机上的 Flipcard - 第一次点击不起作用

Flipcard on mobile - First tap doesn't work

css

mobile

transform

next.js

transition