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，需要以内容为中心。 这是有效的代码段代码：

更新的问题：我还需要实现下一个：一次将鼠标悬停在翻页卡上时，动画必须完成，即使将鼠标悬停在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然后再返回...

您可以在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; -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> 

这个怎么样 ？