How to re-animate CSS3 animations on class change


Tags: css3

Problem :

So I've these CSS3 script

#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; 
}

When the page first loads, the div has #place.us and the animation works perfectly. Now I want to change the class of the div to 'gb' to make it #place.gb using jquery and as soon as the class is changed, I want the same animation to happen.

My jquery code is simple

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

The class changes and the .level1 property is affected as declared in the CSS but the animation doesn't happen. How do I make sure that the animation happens?



Solution :

I'd recommend using CSS transitions as they have better browser coverage, they are simpler to manage and they fallback better (if the browser doesn't support transitions it does the same thing without the animation).

You problem can be solved like this:

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

And the 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
}

You can check out the jsfiddle here: http://jsfiddle.net/EmsXF/


    CSS Howto..

    How do I use a variable inside of a shorthand if/else statement in a PHP for() loop?

    How to dynamically change CSS elements to be HTTPS or HTTP

    How do I remove the gap between the header and image slider

    how to get attribute value using selenium and css

    How to get the table (datatable) left aligned?

    How to add a hiding delay to Full CSS Dropdown Vertical Menu

    how to create animated background like in smartprogress.do using js,css,html5 [closed]

    How to keep the aspect ratio of the image in css?

    How to get minimal jQuery slideshow to slide properly?

    How to change element CSS class when different part of web page is present?

    How to properly position a Bootstrap carousel-caption?

    (HTML/CSS) How to align a text to middle of center (in both x and y axis)? [duplicate]

    CSS: How to set several div's in one line with 100% width?

    How to use CSS to surround a number with a circle?

    How to slide a div out

    CSS - How can I make a font readable over any color?

    How to add background image to only one page in Jade

    Hide / show element if text is / isn't to long in jQuery

    How hard is it to make an expanding tab in CSS?

    How to make sure that two divs appear side by side? [closed]

    How to make background color extend all the way to bottom of page / content?

    How to calculate rotation angle from rectangle points?

    How to stick a div when scrolled past 50% of the item?

    How can I add text right next to (to the right of) an ellipsis text overflow in CSS?

    How to remove rounded from to select query in jquery?

    How to achieve vertical centering with optional extra element and adjacent matching column, in pure CSS, no tables?

    How do I optimize a very loooong page with TONS of images on it?

    How to only make a css element appear on one page?

    How do you add 'box-sizing: border-box' to Normalize.css file?

    How do I get an infinite vertically scrolling image in CSS?