如何在类更改时重新设置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，动画效果非常好。现在，我想使用jquery将div的类更改为"gb"，使其成为#place.gb，并且一旦更改了类，我就希望发生相同的动画。

我的jquery代码是简单的

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

类发生了更改，.level1属性受到CSS中声明的影响，但动画没有发生。如何确保动画发生？

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/