javascript - 运行动画后如何应用无显示？

Question

我有一个表，我通过过滤器动态删除元素。

我想为元素添加一些淡入淡出的动画，但如果我只是淡出它们，我会得到一个可怕且不必要的间隙。我需要应用“显示：无”，但动画不适用于“显示：无”。

那么，我如何通过首先应用淡化动画，然后是“显示：无”来顺序淡化某些东西？

标签： javascriptcss

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等）。