Cómo re-animados animaciones CSS3 sobre el cambio de clase

Question

así que he éstas guió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; 
} 

Cuando la página se carga por primera, el div tiene #place.us y la animación funciona perfectamente. Ahora quiero cambiar la clase del div a 'gb' para que sea #place.gb usando jquery y tan pronto como se cambie la clase, quiero que ocurra la misma animación.

Mi código jQuery es simple

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

Los cambios de clase y la propiedad .level1 se ve afectado según lo declarado en el CSS, pero la animación no sucede. ¿Cómo me aseguro de que la animación suceda?

Answer 1

Recomiendo usar las transiciones CSS, ya que tienen una mejor cobertura del navegador, son más fáciles de administrar y se repliegan mejor (si el navegador no admite transiciones, hace lo mismo sin la animación).

Se problema puede resolverse de esta manera:

// 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"); 
}); 

Y el 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 
} 

Se puede extraer de la jsFiddle aquí: http://jsfiddle.net/EmsXF/