Open danielbodart opened 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?
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
Javascript
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?