Можно ли отменить CSS-анимацию при удалении класса? ⇐ Jquery

[Гость]

По сути, я пытаюсь дать элементу CSS-анимацию, когда он получает класс, а затем отменить эту анимацию, когда я удаляю класс, не воспроизводя анимацию при рендеринге DOM.< /p>
Скрипка здесь: http://jsfiddle.net/bmh5g/
Как вы можете видеть на скрипке, при наведении курсора на «Hover Me» кнопка,

Код: Выделить всё

#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?

Код: Выделить всё

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

Код: Выделить всё

Hover Me

Источник: https://stackoverflow.com/questions/180 ... ss-removal