css transform wait until transition is completed [duplicate] - html

Question

This question already has answers here:
How to use jQuery to wait for the end of CSS3 transitions?
(6 answers)
Closed 6 years ago.
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();
});
}
}

Answer 1

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.