CSS3, HTML5, Javascript: How to make divs fade in?

Question

I have a small problem that I'm really scratching my head as to how to implement. I would like to know how to make a dynamically generated div fade in only. The div(s) are dynamically generated by Javascript code. How do I make it so that the div fades in onto the page? I cannot use jQuery or .innerHTML().

Answer 1

1. Create a rule in your stylesheet with a selector that matches the div and which sets a transition property.
2. Create another rule that matches the div if it is a member of an additional class and style it to be invisible (opacity is a good property to use for this).
3. Create the div
4. Add the class to the div
5. Add the div to the document
6. With a minimal setTimeout (to allow the browser to repaint the document with the div added), remove the class

Answer 2

CSS:

#fade-in-div{
    transition: 1s;
    -webkit-transition: 1s;
    opacity: 0;
}

JS

//generate new div
document.write("<div id='fade-in-div'>New Div!</div>");

//make opacity = 1. This should take 1 second to make (1s fade).
document.getElementById("fade-in-div").style.opacity = 1; //this should take 1 second