Open tnhu opened 6 years ago
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
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.
@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.
is that means we could only detect animation-name
instead of element selector when it has animation-name rule
defined?
@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>
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/