CSS 过渡淡入

Posted 2023-03-06

【中文标题】CSS 过渡淡入

【英文标题】：CSS transition fade in

【发布时间】：2012-07-24 12:47:09

【问题描述】：

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

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

【问题讨论】：

不确定我是否正确理解了这个问题。您是否正在寻找不需要用户交互来让 div 淡入的解决方案？

是的，这是正确的......我将以编程方式创建一个 div 并希望它淡入是 CSS

【参考方案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>

【讨论】：

如果不是以编程方式添加元素，您仍然希望使用 JS 添加此类，因为您可能希望等待 document.ready，而纯 CSS 不会这样做。

这并没有回答如何使用 CSS 过渡来实现这一点的问题。

干杯伙伴，我一直在尝试 5 种不同的方法来让它与 JS 和 CSS 过渡一起工作，这是第一个按预期工作的方法，每次都通过卡盘在每个页面上工作它进入body类。 :)

@Zaqx 过渡是 CSS，触发器由你决定。

@DigitalDesignDj 这是页面顶部问题的引用：“我想严格使用 CSS 来淡入这个 div，但是改变状态似乎很困难 b/ c 他们需要一些用户交互。”

【参考方案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

【讨论】：

感谢帮助，尝试通过各种技术手动触发它，但似乎没有任何效果。看到这篇文章***.com/questions/8101854/…，看来他们也放弃了=(

好的。如果我想到其他可能解决问题的方法，我会回复你。

对于遇到此问题的任何人，这里有一个关于转换的很好的参考css-tricks.com/almanac/properties/t/transition

【参考方案3】：

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

div 
  opacity:0;
  transition:opacity 1s linear;*

div.SomeClass 
  opacity:1;

【参考方案4】：

我总是喜欢对小的 CSS 类使用 mixin，比如淡入/淡出，以防你想在多个类中使用它们。

@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。