运行动画后如何不应用任何内容进行显示？

Question

我有一张桌子，然后通过过滤器动态删除元素。

我想在元素上添加一些淡入淡出的动画，但是如果我将它们淡出，则会出现可怕而不必要的空白。我需要应用“显示：无”，但是动画不适用于“显示：无”。

那么，如何通过先应用淡入淡出的动画然后依次显示“无显示”来依次淡入淡出呢？

Answer 1

使用关键帧：

.show {
    display: block;
    animation: fadeInFromNone 0.2s;
    animation-fill-mode: forwards;
}

.hide {
    display: block;
    animation: fadeOutFromBlock 0.2s;
    animation-fill-mode: forwards;
}

@keyframes fadeInFromNone {
      0% { display: none;  opacity: 0; }
      1% { display: block; opacity: 0; }
    100% { display: block; opacity: 1; }
}

@keyframes fadeOutFromBlock {
      0% { display: block; opacity: 1;    }
     99% { display: block; opacity: 0.01; }
    100% { display: none;  opacity: 0;    }
}

请注意，动画通常需要供应商特定的说明符（-moz，-webkit等）。