CSS过渡淡入

Question

所以我以前使用过CSS转换，但我有一个独特的例子。我正在编写一个用于创建模式的自定义插件。本质上，我创建了一个动态的div document.createElement('div')，并用几个类将其附加到主体中。这些类定义颜色和不透明度。我想严格使用CSS来淡化这个div，但更改状态似乎很困难，因为它们需要一些用户交互。

尝试了一些高级选择器，希望它能改变状态，尝试了媒体查询，希望改变状态。。。在寻找任何想法和建议时，如果可能的话，我真的想把它保存在CSS中。

Answer 1

CSS Keyframes支持现在非常好：

.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>

Answer 2

好吧，首先我不确定使用(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

Answer 3

我相信您可以将class添加到元素中。但无论哪种方式，您都必须使用Jquery或reg JS

div {
  opacity:0;
  transition:opacity 1s linear;*
}
div.SomeClass {
  opacity:1;
}

Answer 4

如果你想在多个类中使用mixin，我总是更喜欢将它们用于诸如淡入/淡出之类的CSS小类。

@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;
    }
}

如果你不想使用mixin，你可以创建一个普通的类.fade-in.