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/

如何在类更改时重新制作CSS3动画的动画

1 个答案: