可以在移除类时反转CSS动画吗? [英] Possible to reverse a css animation on class removal?

问题描述

基本上，我要做的是在元素获得类后给它一个CSS动画，然后在我移除类时不显示该动画，而在DOM呈现时不播放该动画.

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.

在这里拨弄: http://jsfiddle.net/bmh5g/

如您在小提琴中看到的那样，当您将鼠标悬停在悬停我"按钮上时，#item会向下翻转.当您将鼠标悬停在悬停按钮上时，#item只是消失了.我希望#item向上翻转(理想情况下使用相同的动画，但反过来).这可能吗?

As you can see in the fiddle, when you hover the "Hover Me" button, #item flips down. When you mouseoff the hover button, #item just disappears. I want #item to flip back up (ideally using the same animation but in reverse). Is this possible?

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:

Javascript:

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

推荐答案

默认情况下，我会将#item开始时隐藏在反向动画中.然后添加该类以为其赋予动画并显示#item. http://jsfiddle.net/bmh5g/12/

I would have the #item start 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/

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

这篇关于可以在移除类时反转CSS动画吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！