CSS淡入，即时隐藏

Question

我正在尝试构建一个类，我可以轻松地添加到一个元素上，该元素在渲染时会淡入视图，但当我将 display 设置为 none 时会立即隐藏它。

到目前为止，我构建的类将元素淡入视图，但隐藏或元素淡入隐藏有轻微延迟。

到目前为止，我使用 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 时淡化某些东西，但在 display 设置为 none 时立即隐藏。

这个类的用法如下：

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

Answer 1

享受:)

您也有这个动画库，它非常好用且简单易用！

Animate.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

您不需要使用 KeyFrames 来实现这一点。

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

注意，如果您要将过渡添加到 '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;
}