どのようにクラスの変更の再アニメーションCSS3アニメーションに

Question

だから私は、これらの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; 
} 

ページ最初の負荷は、divが#place.usを持ってきたし、アニメーションが完璧に動作します。今度はdivのクラスを 'gb'に変更してjqueryを使用して#place.gbにしたいと思います。クラスが変更されるとすぐに、同じアニメーションを作成します。

私のjqueryのコードは、クラスの変更

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

簡単で、CSSで宣言されたが、アニメーションが起こらないよう.level1特性が影響を受けています。アニメーションが確実に起こるようにするにはどうすればよいですか？

Answer 1

、彼らがより良いブラウザのカバレッジを持っているように私は、彼らは管理が簡単であり、彼らは（ブラウザが移行をサポートしていない場合、それはアニメーションなしで同じことを）良くフォールバック、CSSトランジションを使用してお勧めします。

あなたの問題は次のように解決することができます：

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

そして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 
} 

あなたはここにjsfiddleをチェックアウトすることができます：http://jsfiddle.net/EmsXF/