CODEWITHSUNDEEP
javascripthtmlcssanimation
user3072883
user3072883

Reputation: 21

How to override CSS3 animation with Javascript?

I change the background color of the table (from lightgrey to lightgreen and back) for X seconds with CSS3 animation:

        @keyframes change {
        0%   {background-color: lightgreen;}
        99%   {background-color: lightgreen;}
        100% {background-color: lightgrey;}
    }

the HTML code:

<tr style='background-color: lightgrey; animation: change Xs linear 5s;'>

Now I need to override the CSS animation and change the background color of the table (at any moment) to red when I click on it (and come back to lightgrey when re-click stopping the animation). I simply try to add this code but the CSS animation always overrides the Javascript onclick command:

onclick="this.style.animationPlayState='paused'; this.style.backgroundColor='red';"

Any suggestions? Do you think it's better to do all this in Javascript?

Upvotes: 2

Views: 2102

Answers (2)

user3072883
user3072883

Reputation: 21

The solution adopted (solved with "!important" CSS3 element):

HTML code:

   <tr id="1" style='background-color: lightgrey; animation: change_visite 3s linear 3s;' onclick="change(document.getElementById('1'));">

CSS code:

@keyframes change_visite {
0%   {background-color: lightgreen;}
99%   {background-color: lightgreen;}
100% {background-color: lightgrey;}
}

.evidenziato {
background-color: coral !important;
}

JS code:

function change(classe){
  if(classe.className === "evidenziato"){
    classe.className='';
  } else {
    classe.className='evidenziato';
  }
}

Working example here: http://jsbin.com/ENAqocUb/1/edit?html,css,js,output

Upvotes: 0

Renato Zannon
Renato Zannon

Reputation: 30001

You might want to defer that to CSS classes and selectors:

/* Skipping the -webkit prefix needed by chrome for sake of brevity */
.animated:not(.clicked) {
  animation: change linear 5s;
}

@keyframes change {
  0%    { background-color: lightgreen; }
  99%   { background-color: lightgreen; }
  100%  { background-color: lightgrey;  }
}

.clicked {
  background-color: red;
}

Then, just add the clicked class when the row is clicked:

// Using jQuery for simplicity

$("table").on("click", "tr", function() {
  $(this).addClass("clicked");
});

Working example: http://jsbin.com/IQaRUZa/1/edit

Upvotes: 1

Related Questions