所以我以前使用过 CSS 过渡，但我有一个独特的案例。我正在编写一个用于创建模态的自定义插件。本质上，我即时创建了一个 div document.createElement('div') 并将其附加到带有几个类的主体中。这些类定义颜色和不透明度。我想使用严格的 CSS 来淡入这个 div，但是改变状态似乎很困难，因为它们需要一些用户交互。
尝试了一些高级选择器希望它能够改变状态，尝试媒体查询希望改变状态...寻找任何想法和建议，如果可能的话，我真的希望将其保留在 CSS 中
【问题讨论】：
标签： css css-transitions
这些天对 CSS 关键帧的支持非常好：
.fade-in {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2s;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<h1 class="fade-in">Fade Me Down Scotty</h1>【讨论】：
好的，首先我不确定当你使用(document.createElement('div')) 创建一个 div 时它是如何工作的，所以我现在可能错了，但是不能为此使用 :target 伪类选择器?
如果您查看下面的代码，您可以看到我使用了一个链接来定位 div，但在您的情况下，可能可以从脚本中定位 #new 并且方式让 div 在没有用户交互的情况下淡入，还是我想错了？
这是我的示例的代码：
HTML
<a href="#new">Click</a>
<div id="new">
Fade in ...
</div>
CSS
#new {
width: 100px;
height: 100px;
border: 1px solid #000000;
opacity: 0;
}
#new:target {
-webkit-transition: opacity 2.0s ease-in;
-moz-transition: opacity 2.0s ease-in;
-o-transition: opacity 2.0s ease-in;
opacity: 1;
}
...这是jsFiddle
【讨论】：
我相信您可以将Class 添加到元素中。但无论哪种方式，您都必须使用 Jquery 或 reg JS
div {
opacity:0;
transition:opacity 1s linear;*
}
div.SomeClass {
opacity:1;
}
【讨论】：
我总是喜欢对小的 CSS 类使用 mixin，比如淡入/淡出，以防你想在多个类中使用它们。
@mixin fade-in {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2s;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
如果你不想使用mixins，你可以创建一个普通的类.fade-in。
【讨论】：