CSS3动画不是以JQuery开头

Question

First of all sorry for my bad English. I try my best :)

The idea is to realise an animated countdown (days / hours / minutes / seconds).

This is the countdown :

<div id="sp_days"></div> : <div id="sp_hours"></div> : <div id="sp_minutes"></div> : <div id="sp_seconds"></div>

The animation :

.pop{
    -webkit-animation-name: pop;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-name: pop;
    animation-duration: 1s;
    animation-timing-function: linear;
}
@-webkit-keyframes pop
{
    0% {
        -webkit-transform:scale(1.3);
    }
    100% {
        -webkit-transform:scale(1);
    }
}
@keyframes pop
{
    0% {
        transform:scale(1.3);
    }
    100% {
        transform:scale(1);
    }
}

The code is working for days, hours and minutes, but i can't figure out why not for the seconds...

This is basically my jquery loop :

var last_minutes;
var last_seconds;

setInterval(function () {
    update();
}, 1000);

function update(){
    minutes = ...; // calculating minutes left
    if(last_minutes !== minutes){
        $("#sp_minutes").addClass("pop");
    } else {
        $("#sp_minutes").removeClass("pop");
    }
    last_minutes = minutes;

    seconds = ...; // calculating seconds left
    if(last_seconds !== seconds){
        $("#sp_seconds").addClass("pop");
    } else {
        $("#sp_seconds").removeClass("pop");
    }
    last_seconds = seconds;
}

So when you load the page, every div (days, hours, minutes, seconds) are "pop-ing" and it's normal, the seconds are the only one which is not working after its first "pop" animation.

Thank you for your help.

NB : I know you can loop an animation using animation-iteration-count, but in this case the animation desyncs from the javascript loop every time you change app (smarphones) or reduce windows or change tab in chrome. Also, the loading time of the page can desync the animation too.

Answer 1

I found out how to do it !

Removing and adding the same class at the same time is not taking affect. So you have to clone the element, and then remove the old one in order to restart the animation.

seconds = ...; // calculating seconds left
if(last_seconds !== seconds){
    var el = $("#sp_seconds");  
    var newone = el.clone(true);
    el.before(newone);
    $("." + el.attr("class") + ":last").remove();
}
last_seconds = seconds;

HTML :

<div class="pop" id="sp_seconds">

Source