CSS3卡翻转力整个动画

Question

我在jQuery事件Mouseover上向卡添加了一个类，并在Mouseout上删除了该类。 现在，即使我用鼠标离开Div，我也希望卡片翻转动画能够完全执行。

这是我的代码：

 jQuery('.card').each(function(){ jQuery(this).mouseover(function() { jQuery(this).addClass("flipped"); }); jQuery(this).mouseout(function() { jQuery(this).removeClass("flipped"); }); }); 

 .flipContainer { width: 100%; height: 400px; position: relative; perspective: 800px; border:1px solid black; } .card { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transition: transform 1s; } .card figure { margin: 0; display: block; position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } .card img{ width: 90%; margin-left: 5%; margin-top: 5%; } .card p{ margin-left: 10px; margin-top: 5px; } .card .front { } .card .back { transform: rotateY( 180deg ); } .card.flipped { transform: rotateY( 180deg ); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="flipContainer"> <div class="card"> <figure class="front"><p>1</p></figure> <figure class="back"><p>2</p></figure> </div> </section> <section class="flipContainer"> <div class="card"> <figure class="front"><p>3</p></figure> <figure class="back"><p>4</p></figure> </div> </section> 

Answer 1

/* From Modernizr */
function whichTransitionEvent(){
var t;
var el = document.createElement('fakeelement');
var transitions = {
  'transition':'transitionend',
  'OTransition':'oTransitionEnd',
  'MozTransition':'transitionend',
  'WebkitTransition':'webkitTransitionEnd'
}

for(t in transitions){
    if( el.style[t] !== undefined ){
        return transitions[t];
    }
}
}

/* Listen for a transition! */
var transitionEvent = whichTransitionEvent();
transitionEvent && e.addEventListener(transitionEvent, function() {
console.log('Transition complete!  This is the callback, no library needed!');
});

/*
The "whichTransitionEvent" can be swapped for "animation" instead of "transition" texts, as can the usage :)
*/

该代码不是我提供的，但是这使您可以在过渡结束时进行一个事件。 这样，您就可以拥有一个变量，该变量是客户端上动画的状态。

现在，您可以随时查看是否要删除课程。

做到这一点的一种方法是让一个变量代表转换是否已经完成，以及一个代表状态的变量。

然后在调用mouseover，mouseout或transitionEvent时，只需根据这两个变量删除/添加类。