Html css转换等待转换完成

我有一个元素，它一开始没有应用任何变换

事件发生后，将应用以下转换

transform: rotateY( -180deg );

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

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

只要第一次变换在第二次变换之前完成，一切正常。但是，如果没有，第二次变换将使元素进行水平和垂直360度变换

我怎样才能防止卡执行任何360度操作？和/或等待第一次转换完全完成后再继续

完整代码： HTML

以下是我采用的解决方案：

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();
      });
}


}

如图所示，您可以使用以下jQuery函数实现它：

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

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

---

这可能与和重复。

您可以使用

转换延迟：2s以后你应该标记为可能的重复，而不是在其他地方提供指向另一个答案的链接。谢谢你的更正，我没有意识到，我只是标记了这个问题
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();
      });
}


}

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });