css轉換等待，直到轉換完成

Question

我已經有一個元素開始時沒有應用轉換。

事件發生後，將應用以下轉換。

transform: rotateY(-180deg); 

在另一個事件之後，應用另一個轉換。

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

只要1st轉換在第二個轉換完成之前，一切正常。但是，如果第二次轉換不會使元素執行水平和垂直360.

如何防止卡從事任何360？和/或等到第一次轉換完成後再繼續。

全碼： 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。