Open lxjwlt opened 6 years ago
Hi @lxjwlt - can you explain this feature in more detail? It looks similar to the custom animation-name feature explained here: https://github.com/muicss/sentineljs#on---add-a-watch-for-new-dom-nodes
thanks for review.
i want to make it possible to detect element by selector, even if animation-name generated by sentineljs has been overridden. XD
i don't think it is a elegant solution to detect element by custom animation-name node-inserted
, it means we should add that name everywhere inner css and make sure we don't miss one.
and it also mess up all selectors:
sentinel.on('!node-inserted', function(el) {
if (el.matches('.my-div')) {
// do something...
} else if (el.matches('.my-div2')) {
// do something...
}
});
Can you give an example of how to use your proposed changes?
On Oct 7, 2017, at 11:12 PM, lxjwlt notifications@github.com wrote:
thanks for review. i want to make it possible to detect element by selector, even if animation-name generated by sentineljs has been overridden. XD i don't think it is a elegant solution to detect element by custom animation-name node-inserted, it means we should add that name everywhere inner css and make sure we don't miss one. and it also mess up all selectors:
sentinel.on('!node-inserted', function(el) { if (el.matches('.my-div')) { // do something... } else if (el.matches('.my-div2')) { // do something... } }); — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.
:laughing:as additional test, the changes would not affect the original feature of sentineljs, but it just add watch for all new element. when element animationstart
, it would look for the matched selector contained in selectorToAnimationMap
, and invokes all callbacks.
example is like this:
<style>
@keyframes slidein { /*...*/ }
.my-div { animation-name: slide-in; }
</style>
<script>
/* no matter the element has animation-name defined or not,
we can wacth it by selector */
sentinel.on('.my-div', function(el) {
// ...
});
</script>
If I understand the code correctly, it looks like this pull request iterates through all CSS selectors on every animationstart
event. Is there a way to implement this without iterating through all selectors?
support detect selector when the DOM element has css animation-name defined #4