Làm thế nào để tái sinh động hình ảnh động CSS3 về biến đổi lớp

Question

Vì vậy, tôi đã những kịch bản CSS3

#place.us .level1 { background-position: -100px; background-color: #333; } 
#place.gb .level1 { background-position: -100px; background-color: #CCC; } 

@-webkit-keyframes place-pop-livel1 { 
    0% { bottom: -100px; } 
    100% { bottom: 30px; } 
} 
#place .level1 { 
    animation: place-pop-livel1 2s ease-out; 
    -moz-animation: place-pop-livel1 2s ease-out; 
    -webkit-animation: place-pop-livel1 2s ease-out; 
} 

Khi trang tải lần đầu, div có #place.us và các hình ảnh động hoạt động hoàn hảo. Bây giờ tôi muốn thay đổi lớp của div thành 'gb' để làm cho nó #place.gb bằng cách sử dụng jquery và ngay sau khi lớp được thay đổi, tôi muốn cùng một hình ảnh động xảy ra.

mã jquery của tôi là đơn giản

$('.change-city').live('click', function(){ 
    var city = $(this).data('city'); //gb or us 
    $('#place').removeClass().addClass(city); 
}); 

Những thay đổi lớp và .level1 bất động sản bị ảnh hưởng khi được công bố trong CSS nhưng các hình ảnh động không xảy ra. Làm cách nào để đảm bảo rằng hoạt ảnh diễn ra?

Answer 1

Tôi khuyên bạn nên sử dụng chuyển tiếp CSS vì chúng có độ bao phủ trình duyệt tốt hơn, chúng dễ quản lý hơn và dự phòng tốt hơn (nếu trình duyệt không hỗ trợ quá trình chuyển đổi hoạt động giống như không có hoạt ảnh).

Bạn vấn đề có thể được giải quyết như thế này:

// after load add the animation 
$(".level1").addClass("pop"); 

// after the animation is done hide it again 
$(".level1").bind("webkitTransitionEnd mozTransitionEnd oTransitionEnd msTransitionEnd transitionend", function(){ 
    $(this).removeClass("pop"); 
}); 

$('.change-city').live('click', function(){ 
    var city = $(this).data('city'); //gb or us 
    $('#place').removeClass().addClass(city).find(".level1").addClass("pop"); 
}); 

Và CSS

#place.us .level1 {background-color: #333; } 
#place.gb .level1 {background-color: #CCC; } 


#place .level1 { 
    position: absolute; 
    background-color: #000; 
    width: 100px; 
    height: 100px; 
    bottom: -100px; 
    -webkit-transition: bottom 2s ease; 
    -moz-transition: bottom 2s ease; 
    -o-transition: bottom 2s ease; 
    -ms-transition: bottom 2s ease; 
    transition: bottom 2s ease; 
} 


#place .pop { 
    bottom: 30px 
} 

Bạn có thể kiểm tra jsfiddle đây: http://jsfiddle.net/EmsXF/