jQuery 可以在类删除时反转 css 动画吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18023859/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Possible to reverse a css animation on class removal?
提问by Jake
Essentially what I'm trying to do is give an element a CSS animation when it gains a class, then reverse that animation when I remove the class without playing the animation when the DOM renders.
本质上，我想要做的是在元素获得类时为其提供 CSS 动画，然后在删除类时反转该动画而不在 DOM 渲染时播放动画。
Fiddle here: http://jsfiddle.net/bmh5g/
在这里小提琴：http: //jsfiddle.net/bmh5g/
As you can see in the fiddle, when you hover the "Hover Me" button, #itemflips down. When you mouseoff the hover button, #itemjust disappears. I want #itemto flip back up (ideally using the same animation but in reverse). Is this possible?
正如您在小提琴中所见，当您将鼠标悬停在“悬停我”按钮时，会#item向下翻转。当您将鼠标移开悬停按钮时，#item它就会消失。我想#item向上翻转（理想情况下使用相同的动画但相反）。这可能吗？
HTML:
HTML：
<div id='trigger'>Hover Me</div>
<div id='item'></div>
CSS:
CSS：
#item
{
position: relative;
height: 100px;
width: 100px;
background: red;
-webkit-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
#item.flipped
{
animation: flipper 0.7s;
animation-fill-mode: forwards;
-webkit-animation: flipper 0.7s;
-webkit-animation-fill-mode: forwards;
}
@keyframes flipper
{
0% { transform: perspective(350px) rotateX(-90deg); }
33% { transform: perspective(350px) rotateX(0deg); }
66% { transform: perspective(350px) rotateX(10deg); }
100% { transform: perspective(350px) rotateX(0deg); }
}
@-webkit-keyframes flipper
{
0% { -webkit-transform: perspective(350px) rotateX(-90deg); }
33% { -webkit-transform: perspective(350px) rotateX(0deg); }
66% { -webkit-transform: perspective(350px) rotateX(10deg); }
100% { -webkit-transform: perspective(350px) rotateX(0deg); }
}
Javascript:
Javascript：
$('#trigger').on({
mouseenter: function(){
$('#item').addClass('flipped');
},
mouseleave: function(){
$('#item').removeClass('flipped');
}
})
采纳答案by Blake Plumb
I would have the #itemstart out hidden with the reverse animation by default. Then add the class to give it the animation and show the #item. http://jsfiddle.net/bmh5g/12/
#item默认情况下，我将使用反向动画隐藏开始。然后添加类以赋予它动画并显示#item. http://jsfiddle.net/bmh5g/12/
jQuery
jQuery
$('#trigger').on({
mouseenter: function(){
$('#item').show();
$('#item').addClass('flipped');
},
mouseleave: function(){
$('#item').removeClass('flipped');
}
});
CSS
CSS
#item
{
position: relative;
height: 100px;
width: 100px;
background: red;
display: none;
-webkit-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
animation: flipperUp 0.7s;
animation-fill-mode: forwards;
-webkit-animation: flipperUp 0.7s;
-webkit-animation-fill-mode: forwards;
}
回答by Astrotim
Another approach, rather than using display: none, is to suppress the reverse animation with a class on page load, and then remove that class with the same event that applies the normal animation (eg: flipper). Like so (http://jsfiddle.net/astrotim/d7omcbrz/1/):
另一种方法，而不是使用display: none，是在页面加载时使用类抑制反向动画，然后使用应用正常动画的相同事件删除该类（例如：flipper）。像这样（http://jsfiddle.net/astrotim/d7omcbrz/1/）：
CSS - in addition to the flipperUp keyframe posted by Blake above
CSS - 除了上面 Blake 发布的 flipperUp 关键帧
#item.no-animation
{
animation: none;
}
jQuery
jQuery
$('#trigger').on({
mouseenter: function(){
$('#item').removeClass('no-animation');
$('#item').addClass('flipped');
},
mouseleave: function(){
$('#item').removeClass('flipped');
}
})
回答by Kitanga Nday
In addition to the answers here, please cache your $(selector)
除了这里的答案，请缓存您的 $(selector)
So you pretty much do this var elements = $(selector);to cache.
所以你几乎这样做是var elements = $(selector);为了缓存。
Why?! Because if you use the code in the answers on this page as is you will ask the DOM for that same element collection ($('#item')) each time. DOM reading is an expensive operation.
为什么？！因为如果您按原样使用本页答案中的代码，您$('#item')每次都会向 DOM 询问相同的元素集合 ( )。DOM 读取是一项昂贵的操作。
For example, the accepted answer would look something like so:
例如，接受的答案看起来像这样：
var item = $('#item');
$('#trigger').on({
mouseenter: function(){
item.show();
item.addClass('flipped');
},
mouseleave: function(){
item.removeClass('flipped');
}
});
Since I've written all this text, might as well answer your question using CSS transitions
既然我已经写了所有这些文字，不妨使用 CSS 过渡来回答你的问题
I know you asked for a CSS animations example, but for the animation you wanted to do (a card flipping open), it can be easily achieved using CSS transitions:
我知道您要求提供 CSS 动画示例，但是对于您想要制作的动画（卡片翻开），可以使用 CSS 过渡轻松实现：
#item {
width: 70px;
height: 70px;
background-color: black;
line-height: 1;
color: white;
}
#item+div {
width: 70px;
height: 100px;
background-color: blue;
transform: perspective(250px) rotateX(-90deg);
transform-origin: 50% 0%;
transition: transform .25s ease-in-out
}
#item:hover+div {
transform: perspective(250px) rotateX(0);
}<div id="item"></div>
<div></div>回答by Shane
Its animating down using css so to get it to animate up you need to create a class, say .item-up that does the transformation in the opposite so then you would remove the previous class and add the item-up class and that should animate it up.
它使用 css 进行动画处理，因此要让它进行动画处理，您需要创建一个类，例如 .item-up 进行相反的转换，然后您将删除前一个类并添加 item-up 类，并且应该设置动画起来。
I would write you a js fiddle for it but I dont know the syntax well enough.
我会为它写一个 js 小提琴，但我不太了解语法。
Basically when you will need:
基本上什么时候你需要：
@keyframes flipper
@keyframes flipper-up //This does the opposite of flipper
and
和
$('#trigger').on({
mouseenter: function(){
$('#item').removeClass('flipped-up');
$('#item').addClass('flipped');
},
mouseleave: function(){
$('#item').removeClass('flipped');
$('#item').addClass('flipped-up');
}
})
jsfiddle.net/bmh5g/3courtesy of Jake
jsfiddle.net/bmh5g/3由Hyman提供
