触发CSS动画作为D3.js中的过渡

Question

I have an account balance value that I am displaying using d3. Every second, the value is updated, and depending on whether increases or decreases, I want it to flash green or red respectively. I have two css animations that handle the flash, and each are controlled with a modifier class that can be added to the element, like -increase or -decrease .

I am using d3's classed to control these classes, but that's where I'm running into some issues. Each update loop, I check and remove both of these classes, then conditionally add the appropriate one back on to trigger a new animation. The problem is, if the class remains the same as the last loop, it is not being removed and added again and therefor the animation on triggers when the class changes. How can I get one of these animations to trigger each time?

function refreshBalance(accounts){
  let sum = 0;
  for(let i=0; i < accounts.length; i++){
    sum = sum + (accounts[i].value * accounts[i].rate);
  }

  let balance = d3.select(".balance").select(".currency-value");

  let diff;
  if ((sum - balance.attr("data-balance")) > 0){
    diff = "increment";
  } else {
    diff = "decrement";
  }

  balance.attr("data-balance", normalizeCurrency(sum, 4, 4))
    .text(normalizeCurrency(sum, 4, 4));

  balance.classed("-increment", false);
  balance.classed("-decrement", false);
  balance.classed("-increment", diff === "increment");
  balance.classed("-decrement", diff === "decrement");
}

Answer 1

You should wrap the code that adds new classes in setTimeout function:

  balance.classed("-increment", false);
  balance.classed("-decrement", false);

  setTimeout(function() {
     balance.classed("-increment", diff === "increment");
     balance.classed("-decrement", diff === "decrement");
  });

Little demo:

 var divs = d3.select('body') .data([1,2,3,4,5,6]) .enter() .append('div') .text(function(d,i) { return i; }) setInterval(function() { divs.classed("-increment", false); divs.classed("-decrement", false); setTimeout(function() { divs.classed("-increment", function(d, i) { return i % 2}); divs.classed("-decrement", function(d, i) { return !(i % 2)}); }); }, 3000); 

 div { font-size: 30px; font-weight: bold; } .-increment { animation:increment-animation 1.5s; } .-decrement { animation:decrement-animation 1.5s; } @keyframes increment-animation { 0% { color: black; } 20% { color: green; } 40% { color: black; } 60% { color: green; } 80% { color: black; } 100% { color: green; } } @keyframes decrement-animation { 0% { color: black; } 20% { color: red; } 40% { color: black; } 60% { color: red; } 80% { color: black; } 100% { color: red; } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js"></script>