CSS3，HTML5，Javascript：如何让div淡入？

Question

我遇到一个小问题，我真的很难理解如何实施。我想知道如何仅动态生成div淡入淡出。 div是由Javascript代码动态生成的。如何使div在页面上淡入？我不能使用jQuery或.innerHTML（）。

Answer 1

1. 使用与div匹配的选择器在样式表中创建规则，并设置transition属性。
2. 创建另一个匹配div的规则，如果它是其他类的成员并将其设置为不可见（opacity是一个很好的属性，可用于此）。
3. 创建div
4. 将课程添加到div
5. 将div添加到文档
6. 使用最小setTimeout（允许浏览器使用添加的div重新绘制文档），删除类

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