[英]CSS3 Card Flip force entire animation
I am adding a class to my card on the jQuery event Mouseover, and removing the Class on Mouseout. 我在jQuery事件Mouseover上向卡添加了一个类,并在Mouseout上删除了该类。 Now I want that the card flip animation will execute fully, even If I leave the Div with the mouse. 现在,即使我用鼠标离开Div,我也希望卡片翻转动画能够完全执行。
This is my code: 这是我的代码:
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>
/* 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 :)
*/
The code is not from me, but this allows you to have an event on the end of the transition. 该代码不是我提供的,但是这使您可以在过渡结束时进行一个事件。 This way you can just have a variable which is the state of your animation on the client. 这样,您就可以拥有一个变量,该变量是客户端上动画的状态。
You are now free to see when you want to remove a class or not. 现在,您可以随时查看是否要删除课程。
A way to do it would be having a variable representing if the transition has been finished or not, and a variable representing the state. 做到这一点的一种方法是让一个变量代表转换是否已经完成,以及一个代表状态的变量。
Then when mouseover, mouseout or transitionEvent is called, just remove/add the class depending on those two variables. 然后在调用mouseover,mouseout或transitionEvent时,只需根据这两个变量删除/添加类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.