CSS过渡淡入

Question

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

尝试了一些高级选择器希望它会改变状态,尝试媒体查询希望改变状态...寻找任何想法和建议,我真的想在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

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

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

Answer 3

好的,首先我不确定当你使用创建div时它是如何工作的(document.createElement('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