I am looking to add dynamic content to an element on my HTML page, with the inserted HTML transitioning smoothly from 0% to 100% opacity.
HTML
<div id="content"></div>
CSS
#content {
opacity: 1;
transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-webkit-transition: opacity .5s ease-out;
}
#content.hide {
opacity: 0;
}
JavaScript
function setContent(html) {
var content = document.getElementById("content");
//Add hide class
content.className += " hide";
//Set HTML
content.innerHTML = html;
//Remove hide class
content.className = content.className.replace(/(?:^|\s)hide(?!\S)/g, '');
}
It appears that the browser, particularly Chrome, does not initiate the transition effect until after the function has returned. How can I ensure that the animation takes place?
EDIT: Just to clarify, setContent() is called after the DOM has been loaded. Think of it as an app that refreshes and refills the screen upon a certain action.