CSS 过渡淡入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11660710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS transition fade in
提问by afreeland
So I have used CSS transitions before but I have a unique case with this one. I am writing a custom plugin for creating modals. Essentially I create a div on the fly document.createElement('div')and append it to the body with a few classes. These classes define color and opacity. I would like to use strictly CSS to be able to fade in this div, but making the state change seems difficult b/c they require some user interaction.
所以我之前使用过 CSS 转换，但我有一个独特的案例。我正在编写一个用于创建模态的自定义插件。本质上，我即时创建了一个 divdocument.createElement('div')并将其附加到具有几个类的主体中。这些类定义颜色和不透明度。我想严格使用 CSS 以便能够在这个 div 中淡入淡出，但是使状态更改似乎很困难 b/c 他们需要一些用户交互。
Tried some advanced selectors hoping it would case a state change, tried media query hoping to change state...looking for any ideas and suggestions, I really want to keep this in CSS if possible
尝试了一些高级选择器希望它会改变状态，尝试媒体查询希望改变状态......寻找任何想法和建议，如果可能的话，我真的想将其保留在 CSS 中
回答by DigitalDesignDj
CSS Keyframes support is pretty good these days:
这些天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>回答by Christofer Vilander
OK, first of all I'm not sure how it works when you create a div using (document.createElement('div')), so I might be wrong now, but wouldn't it be possible to use the :target pseudo class selector for this?
好的，首先我不确定当您使用 div 创建 div 时它是如何工作的(document.createElement('div'))，所以我现在可能错了，但是是否可以为此使用 :target 伪类选择器？
If you look at the code below, you can se I've used a link to target the div, but in your case it might be possible to target #newfrom the script instead and that way make the div fade in without user interaction, or am I thinking wrong?
如果您查看下面的代码，您可以看到我使用了一个链接来定位 div，但在您的情况下，可能可以从脚本中定位#new，这样可以使 div 在没有用户交互的情况下淡入，还是我想错了？
Here's the code for my example:
这是我的示例的代码：
HTML
HTML
<a href="#new">Click</a>
<div id="new">
Fade in ...
</div>
CSS
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;
}
... and here's a jsFiddle
...这是一个jsFiddle
回答by Alex Reynolds
I believe you could addClass to the element. But either way you'd have to use Jquery or reg JS
我相信您可以将Class 添加到元素中。但无论哪种方式，您都必须使用 Jquery 或 reg JS
div {
opacity:0;
transition:opacity 1s linear;*
}
div.SomeClass {
opacity:1;
}
