CSS 淡入，即时隐藏

Question

我正在尝试构建一个类，我可以轻松地将其拍打到一个元素上，该元素在渲染时会使元素淡入视野，但当我将display设置为无时会立即将其隐藏。

到目前为止，Ive 构建的类将元素淡入视野，但在隐藏或元素淡入淡出时也有轻微的延迟。

到目前为止，我使用类fadeIn的动画来做到这一点：

@keyframes fadeIn {
from    { opacity: 0; }
to      { opacity: 1; }
}
.fadeIn { 
animation: fadeIn 0.2s both ease-in; 
}

这个淡入，但在隐藏它时有延迟

另一个看起来像这样：

.fade-show {
opacity: 1;
transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-webkit-transition: opacity 2s ease-in;
}

这实际上不会淡入和延迟隐藏。

我只想在渲染时淡出某些东西或display设置为block但在设置为none时立即隐藏display。

此类的用法如下：

<div class="fadeIn" >I fade in but dont fade on hide</div>

Answer 1

享受:)

你还有这个动画库，它非常好，使用起来很简单！

动画.css https://daneden.github.io/animate.css/

.fadeMe {
animation:fadeIn 1s linear;
}
@keyframes fadeIn {
0% {
opacity:0
}
100% {
opacity:1;
}
}
.fadeMe.none {
display:none
}

<div class="fadeMe">Fade in (try to add none after the class?)</div>

Answer 2

您无需使用关键帧来实现此目的。

将元素的初始opacity设置为 0。 添加一个类 (.show( 到元素中，该元素将opacity设置为 1 并添加transition属性。

请注意，如果您要将过渡添加到"div"CSS选择器而不是.show类，那么它将淡入淡出。

添加/删除.show类以显示/隐藏元素。

.HTML：

<div class="show" >I fade in but dont fade on hide</div>

.CSS：

div {
opacity: 0;
}
.show {
opacity: 1;
transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-webkit-transition: opacity 2s ease-in;
}