CSS淡入、即时隐藏

Question

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

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

到目前为止，我已经使用了该类的动画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>