sentinel stops working when the DOM element has css animation-name defined

[tnhu]

This is a super neat technique. Except when the DOM element has animation-name rule defined, it stops working.

https://jsfiddle.net/tnhu/1u146utg/2/

[amorey]

Thanks for checking! There's a work around for this but I hadn't added it to the documentation yet.

To get around this problem you can pass an extra animation name to the on() method:

sentinel.on('.my-div', function(el) {
  // add an input box
  var inputEl = document.createElement('input');
  el.appendChild(inputEl);
}, 'anim1, anim2');

https://github.com/muicss/sentineljs/blob/master/README.md#on---add-a-watch-for-new-dom-nodes

[amorey]

I've added more details about this to the README: https://github.com/muicss/sentineljs/blob/master/README.md#introduction

Marking this as Issue as archived.

[amorey]

@tnhu I added an option to trigger a SentinelJS watch function from CSS by defining a custom animation event name (v0.0.3):

<style>
  @keyframes slidein {
    from: {margin-left: 100%;}
    to: {margin-left: 0%;}
  }

  .my-div {
    animation-duration: 3s;
    animation-name: slide-in, node-inserted;
  }
</style>
<script>
  // trigger on "node-inserted" animation event name (using "!" prefix)
  sentinel.on('!node-inserted', function(el) {
    el.insertHTML = 'The sentinel is always watching.';
  });
</script>

Here's an update to your JSFiddle that fixes the issue: https://jsfiddle.net/muicss/25nus53b/2/

Hope that helps! Let me know you have any thoughts or suggestions.

[lxjwlt]

is that means we could only detect animation-name instead of element selector when it has animation-name rule defined?

[amorey]

@lxjwlt In this scenario, the CSS selector is defined by the CSS rule where animation-name is being used. In other words, both of these code snippets will detect .my-div:

<script>
  sentinel.on('.my-div', function(el) {
    el.insertHTML = 'The sentinel is always watching.';
  });
</script>

<style>
  @keyframes slidein {
    from: {margin-left: 100%;}
    to: {margin-left: 0%;}
  }

  .my-div {
    animation-duration: 3s;
    animation-name: slide-in, node-inserted;
  }
</style>
<script>
  // trigger on "node-inserted" animation event name (using "!" prefix)
  sentinel.on('!node-inserted', function(el) {
    el.insertHTML = 'The sentinel is always watching.';
  });
</script>