CSS过渡淡入效果

Question

我之前使用过CSS过渡效果，但是这次有一个独特的情况。我正在编写一个创建模态框的自定义插件。我使用document.createElement('div')动态创建一个

元素，并将其附加到中，同时添加一些类来定义颜色和不透明度。我想使用纯CSS来淡入这个

元素，但由于需要一些用户交互才能进行状态更改，所以似乎有些困难。

我尝试了一些高级选择器，希望它们可以引起状态更改，尝试了媒体查询来改变状态......希望有任何想法和建议，如果可能的话，我真的希望保持在CSS中实现。

- afreeland

---

我不确定我是否正确理解了问题。您是否正在寻找一种无需用户交互即可淡入div的解决方案？ - Christofer Vilander

是的，没错...我将以编程方式创建一个 div 并希望它在 CSS 中淡入。 - afreeland

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>

- DigitalDesignDj

---

如果您不是以编程方式添加元素，但仍想使用JS来添加此类，则可能希望等待document.ready，而纯CSS无法实现此功能。 - DigitalDesignDj

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

朋友，我已经尝试了5种不同的方式来使用JS和CSS过渡使其正常工作，这是第一种能够按照预期每次在每一页中正常运行的方式，只需将其加入body类即可。 :) - Stuggi

@Zaqx 过渡是 CSS，触发器由您决定。 - DigitalDesignDj

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

不想挑剔，但我注意到（显然又一次）你正在使用CSS动画而不是过渡效果。你可能会有兴趣了解它们之间的区别：https://cssanimation.rocks/transition-vs-animation/ - Zaqx

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示例。

- Christofer Vilander

---

感谢帮助，我尝试了各种手动触发的技术，但似乎都不起作用。我看到了这篇文章https://dev59.com/kmsz5IYBdhLWcg3wHUS0，看起来他们也放弃了 =( - afreeland

好的。如果我想到其他可能解决问题的方法，我会再联系您。 - Christofer Vilander

对于任何遇到这个问题的人，这里有一个关于过渡效果的好参考资料：https://css-tricks.com/almanac/properties/t/transition/ - Bradmage

Answer 3

我相信你可以使用addClass添加类到元素中。但不管哪种方法，你都需要使用Jquery或纯JS。

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

- Alex Reynolds

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。

- WolfJames Mwali