javascript - css3 动画和 jquery(悬停翻转卡)的视觉问题

Question

阅读我:--> 我在悬停翻盖卡片时遇到了麻烦，如果您在悬停在 div 内部时移动光标会持续触发并且会产生令人讨厌的效果，所以这就是我需要:

1) 我想悬停翻转卡片，即使你在悬停时将光标移到里面也不要再次触发动画。

2) 我还需要在翻页卡中垂直居中 p 标签，margin-top 有效，而 margin:auto 无效，我把代码段中的 2 个示例，检查下一个类:

.card .front p {
    margin-top: 100px;
}
.card .back p {
    margin: auto;
}

那么为什么 margin:auto 不起作用？我不会使用 margin-top，需要居中的内容。以下是工作片段代码:

Updated question: I also need achieve the next: one time you hover the flip card the animation must be completed, even you hover out the div, and then flip to the original position again, I tried next but it doesnt work:

$(".container").hover(function(){
            $(this).find(".card").toggleClass('flipped')
        }, function(){
            setTimeout(function(){ 
                $(this).find(".card").toggleClass('flipped')
            }, 1000);
    });

$(document).ready(function () {
    $(".card").hover(function(){
            $(this).toggleClass('flipped')
        }, function(){
            $(this).toggleClass('flipped')
    });
})

.container {
    width: 200px;
    height: 260px;
    position: relative;
    margin: 0 auto 40px;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
    display: inline-block;
}
#main{
    border: 1px solid black;
}
button{
    width: 30%;
    height: 10%;
    margin-top: 100px;
    cursor: default;
}

.card {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: right center;
    -moz-transform-origin: right center;
    -o-transform-origin: right center;
    transform-origin: right center;
}

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

.card div {
    height: 100%;
    width: 100%;
    color: white;
    text-align: center;
    font-weight: bold;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    cursor:pointer;
}

.card .front {
    background: red;
}
.card .front p {
    margin-top: 100px;
}
.card .back p {
    margin: auto;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
        <div id="main"><br>
        <section class="container">
            <div class="card">
                <div class="front"><p>Test</p></div>
                <div class="back">
                    <p>MyBack</p> 
                </div>
            </div>
        </section>
        </div>
    </div>

Answer 1

问题来自于这样一个事实，因为您正在转换获得悬停的元素，指针可能会脱离盒子，导致从 hover 到 的状态发生不必要的变化无 并返回。

您可以在 main div 上捕获 hover 事件。要对齐元素，最简单的方法是使用 CSS Flexbox . margin: auto 将不起作用，因为它默认将 margin-top 和 margin-bottom 设置为 0。

以下是我所做的更改:

$(document).ready(function() {
  $(".container").hover(function() {
    $(".card").toggleClass('flipped')
  }, function() {
    $(".card").toggleClass('flipped')
  });
})

.card .back {
  /*no changes*/
  display: flex;
  justify-content: center;
  align-items: center;
}

.card .front {
  /*no changes*/
  display: flex;
  justify-content: center;
  align-items: center;
}

还有一个工作示例:

$(document).ready(function() {
  $(".container").hover(function() {
    $(".card").toggleClass('flipped')
  }, function() {
    $(".card").toggleClass('flipped')
  });
})

h1 {
  text-align: center;
}

.container {
  width: 200px;
  height: 260px;
  position: relative;
  margin: 0 auto 40px;
  perspective: 800px;
  display: inline-block;
}

#main {
  border: 1px solid black;
}

button {
  width: 30%;
  height: 10%;
  margin-top: 100px;
  cursor: default;
}

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: transform 1s;
  transform-style: preserve-3d;
  transform-origin: right center;
}

.card.flipped {
  transform: translateX( -100%) rotateY( -180deg);
}

.card div {
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  font-weight: bold;
  position: absolute;
  backface-visibility: hidden;
  cursor: pointer;
}

.card .front {
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card .back p {
  margin: auto;
}

.card .back {
  background: blue;
  transform: rotateY( 180deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div id="main"><br>
    <section class="container">
      <div class="card">
        <div class="front">
          <p>Test</p>
        </div>
        <div class="back">
          <p>MyBack</p>
        </div>
      </div>
    </section>
  </div>
</div>

怎么样？