css transform wait until transition is completed

Question

I've got an element that starts out with no transforms applied to it.

After an event, the following transform is applied.

transform: rotateY( -180deg );

After another event, another transform is applied.

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

Everything works fine as long as the 1st transform finishes before the 2nd. However, when it doesn't the 2nd transform will make the element do a horizontal and vertical 360.

How can I prevent the card from doing any 360 ever? and/or wait until the 1st transition is completely finished before continuing.

Full code: 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;*/
}

Here was the solution I went with:

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


}

you can use `transition-delay: 2s;` – Shank Dec 29 '16 at 15:43 — Shank, Dec 29 '16 at 15:43

score 0 · Accepted Answer · edited May 23 '17 at 11:46

0

As noted here, you could achieve it using the following jQuery function:

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

This, in this provided case, will wait for the '#someSelector' CSS animation to finish and then execute whatever piece of code you wish.

This is a possible duplicate to this and this.

edited May 23 '17 at 11:46

Community

1
1

answered Dec 29 '16 at 15:55

Diego Fortes

8,830
3
32
42

1

In the future you should just flag as a possible duplicate instead of providing a link to another answer elsewhere. – TylerH Dec 29 '16 at 16:32
1

Thanks for the correction, I didn't realize it, I just flagged the question – Diego Fortes Dec 29 '16 at 16:34

css transform wait until transition is completed

1 Answers1