Czy można cofnąć animację css przy usuwaniu klasy?

Question

Zasadniczo to, co próbuję zrobić, to nadać elementowi animację CSS, gdy uzyska klasę, a następnie odwrócić tę animację po usunięciu klasy bez odtwarzania animacji, gdy DOM renderuje.

Fiddle tutaj: http://jsfiddle.net/bmh5g/

Jak widać na skrzypcach, po najechaniu na przycisk "Hover Me", #item trzepie na dół. Po odłożeniu przycisku myszkowania #item po prostu znika. Chcę, aby #item odwrócić kopię zapasową (najlepiej za pomocą tej samej animacji, ale w odwrotnej kolejności). czy to możliwe?

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

miałbym #item zacząć ukryte z odwrotnej animacji domyślnie. Następnie dodaj klasę, aby nadać jej animację i pokaż #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

Jego animowanie dół za pomocą css tak, aby ją ożywić się trzeba Stwórz class, say .item-up, który wykonuje transformację w odwrotnym kierunku, a następnie usuniesz poprzednią klasę i dodasz klasę item-up, która powinna ją ożywić.

Napisałbym dla ciebie js fiddle, ale nie znam składni wystarczająco dobrze.

Zasadniczo, gdy będziesz potrzebował:

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

i

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

jsfiddle.net/bmh5g/3 uprzejmości Jake

Answer 3

Innym podejściem, zamiast display: none, jest powstrzymanie odwrotnej animację z klasy na stronie obciążenia, a następnie wyjąć że klasa z tym samym zdarzeniem, które stosuje normalną animację (np .: flipper).Podobnie jak (http://jsfiddle.net/astrotim/d7omcbrz/1/):

CSS - oprócz kluczowej flipperUp wysłana przez Blake powyżej

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

jQuery

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