仅使用 CSS 的 div fadeIn 和 fadeOut（在追加和从 DOM 中删除）。可能吗？

Posted 2023-03-06

【中文标题】仅使用 CSS 的 div fadeIn 和 fadeOut（在追加和从 DOM 中删除）。可能吗？

【英文标题】：div fadeIn and fadeOut (on append and remove from DOM) with CSS only. Is it possible?

【发布时间】：2017-12-03 10:05:06

【问题描述】：

我正在使用 jQuery 在 DOM 上追加和删除一个 div。

我需要一个 CSS 方法来 fadeIn 和 fadeOut 那个带有简单过渡的 div，（也许也只是不透明度）。

但我需要的是不要使用 jQuery addClass 或 animate：只使用 CSS！

有可能吗？

也许我可以使用 animate.css 库？但是只有 fadeIn 或 fadeOut 方法，不能同时使用。而且我不能使用 javascript 添加/删除类。

【问题讨论】：

淡入和淡出到底是什么意思？像这样的东西？ codepen.io/mcoker/pen/YQewgW

移除部分是不可能的。 CSS 不知道何时从 DOM 中移除元素，因此它不知道何时为被移除的元素制作动画。

@MichaelCoker，是的，但是我需要从 DOM 中删除 div 并进行淡出。

淡出是什么意思？我发布的 CSS 淡入，然后淡出。而且您不能使用 CSS 从 DOM 中删除元素。

你能一步一步描述你想要达到的目标吗？

【参考方案1】：

您可以使用:empty 和一个过渡来实现这一点：

var div = $('<div/>').html('Surprise!!');
$('#wrap').append(div);

#wrap 
    text-align:center;
    background-color: #eeeeee;
    display: block;
    height:0px;
    width:300px;    
    transition:all 2s ease-in;
    overflow:hidden;
    opacity:0;


#wrap:not(:empty)    
    height:100px;
    opacity:1;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="wrap"></div>

注意在代码 sn-p 中似乎有点命中注定（有时有效），请参阅此 jsfiddle：https://jsfiddle.net/D2Xht/381/

来源：https://christianheilmann.com/2015/08/30/quicky-fading-in-a-newly-created-element-using-css/

【讨论】：

我非常喜欢你的解决方案，我已经在网上找到了。但我有一个问题。如果我在 div 中插入文本，然后将其删除，则文本会立即消失。我可以使用:before 吗？但后来我在页面上出现了:before 元素......请参阅：jsfiddle.net/yxw2dj5v

我也许可以有一个带有 BLINK 效果的文本或其他东西。我不能在父 div 上产生闪烁效果，但在我附加的 div 上。

刚刚意识到您在删除时也需要它，所以试了一下 - 我明白您对文本立即删除的意思：jsfiddle.net/D2Xht/382 我怀疑这是因为删除操作会立即对文本执行，但是transition 实际上在父级（在这两种情况下），而不是 div 本身。

【参考方案2】：

您实际上可以使用 css 动画属性，该属性会在添加类后立即运行动画。

动画可以运行一次，因此您不必在动画发生后删除类。

所以这是 div：

     <div class="fade-in"></div>

这是css：

@keyframes fade-in
from opacity: 0;
to opacity: 1;

.fade-in
animation-name: fade-in;
animation-iteration-count: 1;
animation-duration: 500ms;

关于淡出，据我所知，你必须添加一个类来设置淡出动画。

更多关于 CSS 动画： https://www.w3schools.com/css/css3_animations.asp

类似的问题： css3 transition animation on load?

【讨论】：

我需要移除动画。