Let's say I have some CSS like
#joe { transition: opacity 500ms; opacity: 0; }Next, I include JavaScript that triggers the addition of a div and then animates the opacity to = 1 when you click the page.
document.body.onclick = function () {
var joe = document.createElement('div')
joe.innerHTML = 'yo!'
joe.id = 'joe'
document.body.appendChild(joe)
joe.style.opacity = 1
}
However, the animation doesn't occur. (Possibly due to the CSS transition treating it as an 'initial page load')
If a timeout is added
document.body.onclick = function () {
var joe = document.createElement('div')
joe.innerHTML = 'yo!'
joe.id = 'joe'
document.body.appendChild(joe)
setTimeout(function () {
joe.style.opacity = 1
}, 100)
}
Then the animation functions.
Yet, in some cases, even a 100ms delay impacts the page's responsiveness. Unfortunately, setting the timeout to 1ms doesn't resolve the issue.
So, what would be the ideal timeout setting? I seek an animation that consistently operates effectively on major browsers without unnecessarily prolonging the timeout.
I prefer CSS transitions over jQuery animation due to efficiency and synchronization advantages. I'm open to suggestions for alternative JavaScript approaches, but please provide an answer to the question.
If there is an initial animation option in CSS, I would appreciate knowing about it...
However, my primary concern is determining the proper timeout setting, especially when animating properties like left or width where CSS may not be flexible for dynamic value calculation using JavaScript.