Question

所以我之前使用过CSS转换但是我有一个独特的案例。我正在编写一个用于创建模态的自定义插件。基本上我是在飞行中创建一个div document.createElement('div')并将它附加到几个类的主体上。这些类定义颜色和不透明度。我想严格使用CSS来淡入这个div，但是进行状态更改似乎很难b / c它们需要一些用户交互。

尝试了一些高级选择器，希望它可以改变状态，尝试媒体查询希望改变状态...寻找任何想法和建议，我真的想在CSS中保留这个

Answer 1

如今，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>

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

我相信你可以addClass到元素。但无论哪种方式，你都必须使用Jquery或reg JS

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

Answer 4

我总是喜欢在小型CSS类中使用混合，例如淡入/淡出，以防您想在多个类中使用它们。

XX_DATE

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

CSS过渡淡入

4 个答案: