css3动画和jquery的视觉问题（悬停翻转卡）

Question

读取我： - ＆gt; 我在悬停翻转卡时遇到麻烦，如果你在div内部移动光标时连续触发它会产生令人讨厌的效果，所以这里是我需要什么：

1）我想悬停翻转卡，即使在悬停时将光标移动到内部也不要再触发动画。

2）我还需要在翻转卡中垂直显示中心p标签，margin-top正在运行且margin:auto无效，我将2个示例放在代码段中，检查下一个类：

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

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

  

更新了问题：   我还需要实现下一个：有一次你翻转翻转卡片必须完成动画，即使你将鼠标悬停在div上，然后再次翻转到原始位置，我尝试下一步但它不起作用：

$(".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变为none并再次返回...

您可以在hover div上捕获main事件。 要使垂直元素居中，简单的方法是使用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;
  -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;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*
.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);
  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>

怎么样？