Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Detect Rendered CSS using a probe container.
// This allows you to benchmark CSSinJS libs after styles have been really applied.
function detectCSSRendered(className, callback) {
const probe = document.createElement('div')
probe.style.visibility = 'hidden'
probe.className = className
var style = document.head.appendChild(document.createElement('style'))
style.textContent = '' +
'@keyframes probe-animation {' +
' from {left: 20%}' +
' to {left: 30%}' +
'}'
probe.addEventListener('animationstart', function() {
probe.parentNode.removeChild(probe)
style.parentNode.removeChild(style)
callback()
})
document.body.appendChild(probe)
}
// Start detection.
detectCSSRendered('test', function() {
console.log('CSS Rendered')
})
var style = document.head.appendChild(document.createElement('style'))
// Let CSSinJS library render this style
style.textContent = '.test {animation: 1s probe-animation;}'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment