-
-
Notifications
You must be signed in to change notification settings - Fork 51
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
sentinel stops working when the DOM element has css animation-name defined #4
Comments
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 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: 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: Hope that helps! Let me know you have any thoughts or suggestions. |
is that means we could only detect |
@lxjwlt In this scenario, the CSS selector is defined by the CSS rule where <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/
The text was updated successfully, but these errors were encountered: