search

kubetail-org / sentineljs

Detect new DOM nodes using CSS selectors (650 bytes)
MIT License
1.13k stars 51 forks source link

Alternative strategy for not conflicting with previous animations... #17

Open danielbodart opened 3 years ago

danielbodart commented 3 years ago

I have come up with a simple alternative strategy that allows Sentinel to not conflict with previously defined animations: Just add a data attribute after the event fires and then make the animation use a negative attribute selector.

CSS

.some.selector.you.are.watching:not([data-sentinal-watched]) {
  animation: 0.0001s sentinal_watch;
}

Javascript

document.addEventListener('animationstart', ev => {
  if(ev.animationName === 'sentinal_watch') {
    ev.target.setAttribute('data-sentinal-watched', '');
  } 
});

Link to a CodePen example: https://codepen.io/danielbodart/pen/MWyxNQY

I don't think it's perfect as you will probably have a flicker as the JS will take time to run but maybe it's better?