Question

我在jQuery事件Mouseover上向我的卡添加了一个类，并删除了Mouseout上的Class。现在我想要卡片翻转动画将完全执行，即使我用鼠标离开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时，只需根据这两个变量删除/添加类。

CSS3卡翻转整个动画

1 个答案: