変換が完了するまでCSS変換が待機します

Question

変換が適用されていない要素があります。

イベントが発生すると、次の変換が適用されます。

transform: rotateY(-180deg); 

別のイベントの後に、別のトランスフォームが適用されます。

transform: rotateZ( -15deg) rotateY(-180deg) translateX(1000px) translateY(-600px); 

第2変換の前に第1変換が終了する限り、すべて正常に動作します。しかし、そうでない場合、2回目の変換では要素が水平および垂直360になります。

どのようにして360を実行することを防ぐことができますか？および/または第1の遷移が完全に終了してから続行するまで待つ。

全コード： HTML

<div class="studyCard"> 
     <div class="card flip"> 
      <input class="currentCardKey" type="hidden" value=""> 
      <input class="currentCardPlacement" type="hidden" value=""> 
     <div class="cardFront"> 
      <div class="cardSub"> 
       <p style="max-height:100px;"> 
        <span class="frontText">FrontText</span> 
       </p> 
      </div> 
     </div> 
     <div class="cardBack"> 
      <div class="cardSub"> 
       <p style="max-height:100px;"> 
        <span class="backText">BackText</span> 
       </p> 
      </div> 
     </div> 
     </div> 
    </div> 

CSS

.studyCardContainer{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    padding: 70px 0px 90px; 
    z-index: 10; 
} 


.studyCard{ 
    margin:0 5px; 
    position: relative; 
    height: 100%; 
    cursor: pointer; 
    perspective: 2000px; 
} 
.card{ 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    transform-style: preserve-3d; 
    transition-duration: .40s; 
    /*-o-transition-duration: .70s; 
    -webkit-transition-duration: .70s; 
    -moz-transition-duration: .70s;*/ 
} 
.card .cardFront,.card .cardBack{ 
    border: 1px solid #888; 
    background-color: #FFF; 
    box-shadow: 0px 2px 12px 0px rgba(0,0,0,.2); 
    margin: 0; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    backface-visibility: hidden; 
    display: table; 
    table-layout: fixed; 
    overflow: auto; 

} 
/*.card .cardFront {}*/ 
.card.flip{ 
    transform: rotateY(0deg); 
    -o-transform: rotateY(0deg); 
    -webkit-transform: rotateY(0deg); 
    -moz-transform: rotateY(0deg); 
} 
.card.flipped, .card .cardBack { 
    transform: rotateY(-180deg); 
    -o-transform: rotateY(-180deg); 
    -webkit-transform: rotateY(-180deg); 
    -moz-transform: rotateY(-180deg); 
    ; 
} 
.card.flip,.card.flipped{ 

} 


.card.flip.sling{ 
    transform: rotateZ( -15deg) rotateY(0deg) translateX(-1000px) translateY(-600px); 
/* -o-transform: rotateZ( -15deg) rotateY( 0deg) translateX( -1000px) translateY( -600px); 
    -webkit-transform: rotateZ( -15deg) rotateY( 0deg) translateX( -1000px) translateY( -600px); 
    -moz-transform: rotateZ( -15deg) rotateY( 0deg) translateX( -1000px) translateY( -600px);*/ 
} 
.card.flipped.sling{ 
    transform: rotateZ( -15deg) rotateY(-180deg) translateX(1000px) translateY(-600px); 
/* -o-transform: rotateZ( -15deg) rotateY( -180deg) translateX( 1000px) translateY( -600px); 
    -webkit-transform: rotateZ( -15deg) rotateY( -180deg) translateX( 1000px) translateY( -600px); 
    -moz-transform: rotateZ( -15deg) rotateY( -180deg) translateX( 1000px) translateY( -600px);*/ 
} 
.card.sling{ 
    /*opacity: 0;*/ 
    /*display: none;*/ 
    transition-duration: .4s; 
/* -o-transition-duration: .70s; 
    -webkit-transition-duration: .70s; 
    -moz-transition-duration: .70s;*/ 
} 

ここ

だった私が一緒に行った解決策：

function flipCard(sideToSwitchTo){ 
    if(sideToSwitchTo != "front" && sideToSwitchTo != "back"){ 
     //decide for self 
     if($('.revealAnswerButton').is(":visible")){ 
      sideToSwitchTo = "back"; 
     }else{ 
      sideToSwitchTo = "front"; 
     } 
    } 

    if(sideToSwitchTo == "back"){ 
     $('.card:first').removeClass('flip').addClass("flipped"); 
    }else{ 
     $('.card:first').removeClass("flipped").addClass('flip'); 
    } 
    $('.card:first').addClass('flipTransition'); 
    $('.card:first').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',function() { 
     $(this).removeClass('flipTransition'); 
    }); 
} 

function slingCardAway(){ 

    if($('.card:first').hasClass('flipTransition')){ 
     $('.card:first').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',function() { 
      $(this).addClass('sling'); 
      $(this).on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',function() { 
       $(this).remove(); 
      }); 
     }); 
    }else{ 
     $('.card:first').addClass('sling'); 
     $('.card.sling').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',function() { 
      $(this).remove(); 
     }); 
} 


} 

Answer 1

noted hereとして、あなたはそれが次のjQuery使用して達成できます関数：

​​

これは、この場合、「#someSelector」CSSアニメーションが終了するのを待ってから、必要なコードを実行します。

thisとthisの可能な複製です。