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重复。

css转换等待转换完成

1 个答案: