可以在类删除时反转css动画吗？
可以在类删除时反转css动画吗？
提问于 2013-08-03 02:34:28
基本上，我要做的是在元素获得一个类时给它一个CSS动画，然后在删除类时反转动画，而不在DOM呈现时播放动画。
小提琴在这里：http://jsfiddle.net/bmh5g/
正如你在小提琴上看到的，当你悬停在"Hover Me“按钮上时，#item就会翻转下来。当你离开鼠标悬停按钮时，#item就会消失。我希望#item翻转回来(理想情况下使用相同的动画，但方向相反)。这个是可能的吗？
$('#trigger').on({
mouseenter: function() {
$('#item').addClass('flipped');
},
mouseleave: function() {
$('#item').removeClass('flipped');
}
})#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);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='trigger'>Hover Me</div>
<div id='item'></div>
回答 7
Stack Overflow用户
回答已采纳
发布于 2013-08-03 03:02:18
默认情况下，我会让#item在启动时隐藏反向动画。然后添加类，为其提供动画并显示#item。http://jsfiddle.net/bmh5g/12/
$('#trigger').on({
mouseenter: function() {
$('#item').show();
$('#item').addClass('flipped');
},
mouseleave: function() {
$('#item').removeClass('flipped');
}
});#trigger {
position: relative;
display: inline-block;
padding: 5px 10px;
margin: 0 0 10px 0;
background: teal;
color: white;
font-family: sans-serif;
}
#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;
}
#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);
}
}
@keyframes flipperUp {
0% {
transform: perspective(350px) rotateX(0deg);
}
33% {
transform: perspective(350px) rotateX(10deg);
}
66% {
transform: perspective(350px) rotateX(0deg);
}
100% {
transform: perspective(350px) rotateX(-90deg);
}
}
@-webkit-keyframes flipperUp {
0% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
33% {
-webkit-transform: perspective(350px) rotateX(10deg);
}
66% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
100% {
-webkit-transform: perspective(350px) rotateX(-90deg);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id='trigger'>Hover Me</div>
<div id='item'></div>
Stack Overflow用户
发布于 2014-10-02 07:47:39
另一种方法，而不是使用display: none，是在页面加载时用一个类抑制反向动画，然后用应用正常动画的相同事件删除那个类(例如: flipper)。就像这样(http://jsfiddle.net/astrotim/d7omcbrz/1/)：
CSS -除了布莱克在上发布的flipperUp关键帧
#item.no-animation
{
animation: none;
}jQuery
$('#trigger').on({
mouseenter: function(){
$('#item').removeClass('no-animation');
$('#item').addClass('flipped');
},
mouseleave: function(){
$('#item').removeClass('flipped');
}
})Stack Overflow用户
发布于 2018-08-11 01:18:34
除了这里的答案之外，请缓存您的$(selector)
因此，您基本上可以对缓存执行此var elements = $(selector);操作。
为什么？!因为如果您按原样使用本页答案中的代码，则每次都会向DOM询问相同的元素集合($('#item'))。读取DOM是一项开销很大的操作。
例如，可接受的答案如下所示：
var item = $('#item');
$('#trigger').on({
mouseenter: function(){
item.show();
item.addClass('flipped');
},
mouseleave: function(){
item.removeClass('flipped');
}
});既然我已经写完了所有的文本，不妨使用CSS转换来回答您的问题
我知道你想要一个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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18023859
复制相关文章
相似问题