Mouseenter/Mouseexit 上的 jQuery Card Flip - 触发多次

Question

问题是，如果您执行 mouseenter 并快速摆动鼠标，它会多次触发翻转动作，使其闪烁或看起来很奇怪。有没有更好的方法来做我在这里做的事情？

jQuery('.card').mouseenter(function(e) {
        e.stopPropagation();
        jQuery(this).addClass('flipped');
}).mouseleave(function(e){
        e.stopPropagation();
        jQuery(this).removeClass('flipped');
});

.card {
  width: 150px;
  height: 300px;
  position: absolute;
  cursor: pointer;
  background-color: purple;
  
  
  /* Set the transition effects */
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  -o-transition: -o-transform 0.4s;
  transition: transform 0.4s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.card.flipped {
  -webkit-transform: rotateY( 180deg );
  -moz-transform: rotateY( 180deg );
  -o-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
 
}

.card .front,
.card .back {
  display: block;
  height: 100%;
  width: 100%;
  text-align: center;
  position: absolute;

    display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  
  box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
}

.card .front h3 {
    font-size: 30px;
}

.card .back p {
    height: 75px;
}

.card .front .card-text {
    padding: 0 25px;
    height: 100px;
}

.card .back {
  width: 100%;
  padding-left: 3%;
  padding-right: 3%;
  font-size: 16px;
  text-align: left;
  line-height: 25px;
  background-color: #ffffff;
  text-align: center;
  display: flex;
  align-items: center;
}

.card .back {
  -webkit-transform: rotateY( 180deg );
  -moz-transform: rotateY( 180deg );
  -o-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
}

.card .apply-link {
    text-decoration: none;
    background-color: #fff;
    color: #000;
    padding: 8px 20px;
}

.card .back h3 {
    font-size: 24px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
        <div class="front">
            <h3>Big Header</h3>
            <div class="card-text">Info text here</div>
        </div>
        <div class="back" style="background-color: #b24377">
            <h3>Up to 40% off</h3>
            <p>Text here </p>
            <a href="http://linkhere.com" class="apply-link">Apply Now</a>
        </div>
    </div>

问题是，如果您执行 mouseenter 并快速摆动鼠标，它会多次触发翻转动作，使其闪烁或看起来很奇怪。有没有更好的方法来做我在这里做的事情？

Answer 1

1. 无需为此使用 jQuery，纯 CSS 即可处理。
2. 您的情况不再需要供应商前缀。
3. “摆动效应”是预期的行为。

   尝试这个

   .card {
     width: 150px;
     height: 300px;
     position: absolute;
     cursor: pointer;
     background-color: purple;
     transition: transform 0.4s;
     transform-style: preserve-3d;
   }
   
   .card:hover {
     transform: rotateY( 180deg);
   }
   
   .card .front,
   .card .back {
     display: block;
     height: 100%;
     width: 100%;
     text-align: center;
     position: absolute;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     backface-visibility: hidden;
     box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
   }
   
   .card .front h3 {
     font-size: 30px;
   }
   
   .card .back p {
     height: 75px;
   }
   
   .card .front .card-text {
     padding: 0 25px;
     height: 100px;
   }
   
   .card .back {
     width: 100%;
     padding-left: 3%;
     padding-right: 3%;
     font-size: 16px;
     text-align: left;
     line-height: 25px;
     background-color: #ffffff;
     text-align: center;
     display: flex;
     align-items: center;
   }
   
   .card .back {
     transform: rotateY( 180deg);
   }
   
   .card .apply-link {
     text-decoration: none;
     background-color: #fff;
     color: #000;
     padding: 8px 20px;
   }
   
   .card .back h3 {
     font-size: 24px;
   }

   <div class="card">
     <div class="front">
       <h3>Big Header</h3>
       <div class="card-text">Info text here</div>
     </div>
     <div class="back" style="background-color: #b24377">
       <h3>Up to 40% off</h3>
       <p>Text here </p>
       <a href="http://linkhere.com" class="apply-link">Apply Now</a>
     </div>
   </div>