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