显示为“无”的CSS动画关键帧可以淡入，但不能淡出

我有一个元素在开始时没有显示。当我向它添加一个类时，我希望它使用CSS淡入

我发现可以使用关键帧，这对淡入效果很好。但是如果我想以同样的方式淡出，元素会立即隐藏起来，没有动画

基本上是这样的：

.box {
  display: none;
  opacity: 0;
  animation: FadeOut 1s ease-in-out;

  &.active {
    display: block;
    opacity: 1;
    animation: FadeIn 1s ease-in-out;
  }
}

以下是一个“工作”示例：

---

无法设置显示属性的动画或转换显示属性

注意：这并不是说不能在关键帧动画中使用它，但这与实际设置它的动画不同

Codepen演示无法按预期工作的原因是，

.active

类被立即删除，因此动画输出没有时间触发，默认的

显示：none

现在立即应用

因为您无论如何都在使用Jquery，所以有一个内置函数

fadeToggle

，可以实现您想要的功能

$（'button'）。在（'click'，函数（e）{
e、 预防默认值（）；
$（this）.birds（'.box'）.fadeToggle（500）；
})

*{
框大小：边框框；
文本对齐：居中；
}
钮扣{
利润率：30px0；
边框：1px实心#ccc；
文本对齐：居中；
填充：1em；
背景：无；
盒影：无；
}
.盒子{
保证金：0自动；
宽度：80%；
显示：无；
线高：100px；
背景：#ccc；
边框：1px实心#444；
文本对齐：居中；
}

切换显示
我移动得很好

尝试为

显示设置动画：无

是问题的根源。为什么淡入效果好而淡出效果不好，这是因为同时使用了

显示

和

不透明度

显示

属性仅由是否应用了

.active

决定；动画实际上并没有改变它，而

不透明度

按预期设置动画。在淡入时，这意味着您将立即显示元素，然后元素将从透明过渡到不透明。在淡出模式下，这意味着您可以立即隐藏元素，然后在隐藏时将其从不透明转换为透明

有几种不同的方法可以解决这个问题，但这取决于上下文。例如，可以将其保留为

块

元素，并使用

高度

属性使其折叠：

$（'button'）。在（'click'，函数（e）{
e、 预防默认值（）；
$（this）.sides（'.box'）.toggleClass（'active'）；
})

@import“bourbon”；
* {
框大小：边框框；
文本对齐：居中；
}
钮扣{
利润率：30px0；
边框：1px实心#ccc；
文本对齐：居中；
填充：1em；
背景：无；
盒影：无；
}
.盒子{
保证金：0自动；
宽度：80%；
身高：0；
显示：块；
线高：100px；
背景：#ccc；
边框：1px实心#444；
文本对齐：居中；
不透明度：0；
动画：淡入淡出1s；
}
.box.active{
显示：块；
高度：初始高度；
不透明度：1；
动画：FadeIn 1s轻松输入输出；
}
@关键帧淡入淡出{
0% {
不透明度：0；
高度：初始高度；
}
100% {
不透明度：1；
高度：初始高度；
}
}
@关键帧淡出{
0% {
不透明度：1；
高度：初始高度；
}
99% {
不透明度：0；
高度：初始高度；
}
100% {
身高：0；
不透明度：0；
身高：0；
}
}

切换显示
我移动得很好
显示折叠的额外段落

正如您在示例中看到的，我为淡入设置了动画。当您删除

中的
显示：none
时，
.box
选择器中的动画会变得平滑，但长方体不会折叠。不，您确实没有…它可能看起来像，但无法设置动画。您可以在关键帧中使用它，但在我没有使用前缀的示例中，它会立即从
none
切换到
block
。这在某些浏览器中可能不起作用，因此您可能看不到它。我测试了chrome，它不需要前缀。如果你将-moz-添加到动画和关键帧中，它会工作…你不明白，它是不可设置动画的…但它可以用于动画中…这不是一回事。问题的根本原因是第二个淡入淡出动画永远不会触发，因为类会立即删除…而显示会立即恢复为无…因为它无法设置动画/转换。唯一的问题是，我在页面加载时看到淡出动画：（您可以通过将
淡出
动画放在一个单独的类上（例如
非活动
）来解决此问题。您可以根据需要添加和删除这两个类，而不是切换
活动
）。