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> 

這個怎么樣 ？