可以在类删除时反转css动画吗？

Question

基本上我正在尝试做的是当一个元素获得一个类时给它一个CSS动画,然后当我在DOM渲染时删除该类而不播放动画时反转该动画.

在这里小提琴:http://jsfiddle.net/bmh5g/

正如你在小提琴中看到的那样,当你悬停"Hover Me"按钮时,#item向下翻转.当您将鼠标悬停在鼠标悬停按钮上时,#item它就会消失.我想#item倒退(理想情况下使用相同的动画,但相反).这可能吗？

HTML:

<div id='trigger'>Hover Me</div>
<div id='item'></div>

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:

$('#trigger').on({
    mouseenter: function(){
        $('#item').addClass('flipped');
    },
    mouseleave: function(){
        $('#item').removeClass('flipped');
    }
})

Answer 1

#item默认情况下,我会用反向动画隐藏起始.然后添加该类以给它动画并显示#item.http://jsfiddle.net/bmh5g/12/

jQuery的

$('#trigger').on({
    mouseenter: function(){
        $('#item').show();
        $('#item').addClass('flipped');
    },
    mouseleave: function(){
        $('#item').removeClass('flipped');
    }
});

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;
}

Answer 2

另一种方法,而不是使用display: none,是在页面加载时使用类来抑制反向动画,然后使用应用普通动画的相同事件(例如:鳍状肢)删除该类.像这样(http://jsfiddle.net/astrotim/d7omcbrz/1/):

CSS - 除了Blake上面发布的flipperUp关键帧之外

#item.no-animation 
{
  animation: none;
}

jQuery的

$('#trigger').on({
    mouseenter: function(){
        $('#item').removeClass('no-animation');
        $('#item').addClass('flipped');
    },
    mouseleave: function(){
        $('#item').removeClass('flipped');
    }
})

Answer 3

除了这里的答案，请缓存您的 $(selector)

所以你几乎这样做是var elements = $(selector);为了缓存。

为什么？！因为如果您按原样使用本页答案中的代码，您$('#item')每次都会向 DOM 询问相同的元素集合 ( )。DOM 读取是一项昂贵的操作。

例如，接受的答案看起来像这样：

var item = $('#item');
$('#trigger').on({
    mouseenter: function(){
        item.show();
        item.addClass('flipped');
    },
    mouseleave: function(){
        item.removeClass('flipped');
    }
});

既然我已经写了所有这些文字，不妨使用 CSS 过渡来回答你的问题

我知道您要求提供 CSS 动画示例，但是对于您想要制作的动画（卡片翻开），可以使用 CSS 过渡轻松实现：

var item = $('#item');
$('#trigger').on({
    mouseenter: function(){
        item.show();
        item.addClass('flipped');
    },
    mouseleave: function(){
        item.removeClass('flipped');
    }
});

#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);
}