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/

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您无需使用KeyFrame来实现此目的。

将元素的初始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;
}

CSS淡入，即时隐藏

2 个答案: