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

Question

基本上我要做的是在获得一个类时为元素提供一个CSS动画，然后当我移除类而不播放动画时，在DOM渲染时反转该动画。 / p>

在这里小提琴：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);几乎可以缓存。

为什么？！因为如果您照原样使用此页面上答案中的代码，则每次都会向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>

Answer 4

使用css进行动画制作，以便让它动画起来你需要创建一个类，比如说.item-up，它会在相反的情况下进行转换，然后你将删除前一个类并添加item-up类和应该动画起来。

我会为你写一个js小提琴，但我不太清楚它的语法。

基本上当你需要：

@keyframes flipper
@keyframes flipper-up  //This does the opposite of flipper

和

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

jsfiddle.net/bmh5g/3由Jake提供

Answer 5

您可以利用属性animation-direction反向运行相同的动画。 如果您将其与here中所述的多种重新启动动画的方法结合使用-我们可以在mouseenter上向前播放动画，然后在mouseleave上我们可以重新启动并反向播放

我不知道如何很好地使用jQuery，因此我选择了本文提到的一种非jQuery方法。

const element_button = document.getElementById('trigger');
const element_item = document.getElementById('item');

element_button.addEventListener("mouseenter", () => {
  if (element_item.classList.contains('animate-backwards')) {
    element_item.classList.remove('animate-backwards');
    void element_item.offsetWidth;
  }
  
  element_item.classList.add('animate-forwards');
});

element_button.addEventListener("mouseleave", () => {
  element_item.classList.remove('animate-forwards');
  void element_item.offsetWidth;
  
  element_item.classList.add('animate-backwards');
});

和

#item.animate-forwards {
  animation: flipper 0.7s normal;
  -webkit-animation: flipper 0.7s normal;
  
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

#item.animate-backwards {
  animation: flipper 0.7s reverse;
  -webkit-animation: flipper 0.7s reverse;
  
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

这里是上述代码的jsFiddle。

Answer 6

来自MDN的CSS解决方案，几乎所有浏览器都支持

.animation（animationName 10s ease-in-out无限替代两者都在运行;）