html隐藏右侧移出动画,javascript – 可以在类移除时反转css动画？

基本上我想做的是给一个元素一个CSS动画，当它获得一个类，然后反转那个动画，当我删除类，而不播放动画时，DOM渲染。

正如你可以看到在小提琴，当你悬停“悬停我”按钮，#item翻转下来。当您滑鼠悬停按钮时，#item就会消失。我想要#item翻转回来(理想情况下使用相同的动画，但相反)。这可能吗？

HTML：

Hover Me

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');

}

})