38

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

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

4

4 回答 4

92

这些天对 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>

于 2016-09-23T21:38:04.023 回答
16

好的，首先我不确定当你使用创建 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

于 2012-07-27T06:49:03.133 回答
11

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

div {
  opacity:0;
  transition:opacity 1s linear;*
}
div.SomeClass {
  opacity:1;
}
于 2012-07-26T00:33:51.240 回答
3

我总是喜欢将 mixins 用于像淡入/淡出这样的小型 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;
    }
}

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

于 2020-07-17T06:51:19.283 回答