Angular 6 不显示任何初始状态，并使动画覆盖状态

Question

尝试制作"自定义"错误工具提示。

首先，工具提示具有.errorTooltipUnload类：

.errorTooltipUnload {
animation: tooltipUnload 1s;
animation-fill-mode: forwards;
display: none;
}

使用此动画：

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

然后当hasErrortrue时，它将类更改为.errorTooltipLoad执行相同的操作，但与卸载相反。

<div [ngClass]="{'errorTooltipLoad': hasError, 'errorTooltipUnload': !hasError}" id="loadError"></div>

问题所在

当hasError变为 false 时，div 在没有动画的情况下消失 - 那是因为它默认具有display: none属性。

如果我删除此属性，我将看到工具提示在页面加载时出现和消失。

有没有解决方法，使动画结束后display: none不影响？

Answer 1

从errorTooltipUnload中删除display: none;

.errorTooltipUnload {
animation: tooltipUnload 1s;
animation-fill-mode: forwards;
}
@keyframes tooltipUnload {
0% {
display: block;
opacity: 1;
}
100% {
opacity: 0;
display: none;
}
}

<div class="errorTooltipUnload" id="loadError">hello</div>