Animate row background with css when data has changed

Question

I am using Telerik Grid for Blazor WASM.

When data has changed on the server. I get notified via a SignalR connection.

I would like the affected rows to change background color and then return to the normal background color. Could be a transition to red and fade back to the white or gray color.

I have seen many examples using hover and transitions. But this should be shown without user interaction and preferably delayed on items not in the current view. So when you scroll the grid and the items become visible, the animation starts.

Can AOS https://github.com/michalsnik/aos be used? Or will it only trigger on scroll?

The easiest way for me would be to set a class on the row in the row render event. But it’s a razor page so I can code a custom template.

Answer 1

Whatever can be done using :hover can be done if you add a class (then remove it after the transition). As for the appear only after scroll, you can check for the element is in view using the provided function.

function isScrolledIntoView(el) {
  // from https://stackoverflow.com/a/22480938/3807365
  var rect = el.getBoundingClientRect();
  var elemTop = rect.top;
  var elemBottom = rect.bottom;

  // Only completely visible elements return true:
  var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
  // Partially visible elements return true:
  // isVisible = elemTop < window.innerHeight && elemBottom >= 0;
  return isVisible;
}

var el = document.querySelector(".row")

window.addEventListener("scroll", function() {
  if (isScrolledIntoView(el)) {
    if (el.getAttribute("data-did-it")) {
      return;
    }
    el.setAttribute("data-did-it", "true")
    el.classList.add("active")
    setTimeout(function() {
      el.classList.remove("active")
    }, 500)
  }
})

.row {
  transition: 500ms;
  background: white;
}

.active {
  background: yellow;
}

<div style="height: 400px">
  scroll down
</div>

<div class="row">
  this is a row
</div>


<div style="height: 400px">
  scroll up
</div>