Có thể đảo ngược hoạt ảnh css khi xóa lớp học?

Question

Về cơ bản những gì tôi đang cố gắng làm là cho phần tử hoạt ảnh CSS khi nó đạt được một lớp, sau đó đảo ngược hoạt ảnh đó khi tôi xóa lớp mà không phát hoạt ảnh khi DOM hiển thị.

Fiddle ở đây: http://jsfiddle.net/bmh5g/

Như bạn có thể nhìn thấy trong fiddle, khi bạn di chuột vào nút "Di Me", #item flips xuống. Khi bạn di chuột qua nút di chuột, #item sẽ biến mất. Tôi muốn #item để lật ngược (lý tưởng là sử dụng cùng một hình động nhưng ngược lại). Điều này có thể không?

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

tôi sẽ có #item bắt đầu ra ẩn với hình ảnh động ngược lại theo mặc định. Sau đó, thêm lớp để cho nó hoạt hình và hiển thị #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

nó sinh động xuống bằng css như vậy để làm cho nó sinh động lên bạn cần tạo một lớp học, nói .item-up mà không chuyển đổi trong đối diện để sau đó bạn sẽ loại bỏ các lớp học trước đó và thêm các mục lên lớp và đó nên animate nó lên.

Tôi sẽ viết cho bạn một js fiddle cho nó nhưng tôi không biết cú pháp đủ tốt.

Về cơ bản khi bạn sẽ cần:

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

và

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

jsfiddle.net/bmh5g/3 kê biếu không của Jake

Answer 3

cách tiếp cận khác, thay vì sử dụng display: none, là để ngăn chặn các hình ảnh động ngược lại với một lớp trên tải trang, và sau đó loại bỏ lớp với cùng một sự kiện áp dụng hoạt ảnh bình thường (ví dụ: flipper).Như vậy (http://jsfiddle.net/astrotim/d7omcbrz/1/):

CSS - ngoài các keyframe flipperUp đăng bởi Blake trên

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

jQuery

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