support detect selector when there are animation-name defined already

[lxjwlt]

support detect selector when the DOM element has css animation-name defined #4

[amorey]

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

[lxjwlt]

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...
    }
});

[amorey]

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.

[lxjwlt]

: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>

[amorey]

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?