css转换等到转换完成[重复]

Question

我有一个开始时没有应用任何变换的元素。

在一个事件之后，应用以下变换。

transform: rotateY( -180deg );

在另一个事件之后，应用另一个变换。

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

只要第一次转换在第二次之前完成，一切正常。然而，当它不这样做时，第二次变换将使元素做一个水平和垂直 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").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

在本例中，这将等待“#someSelector”CSS 动画完成，然后执行您希望的任何代码。

这可能与this 和this 重复。