javascript - 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;
    }
}

然后当hasError是true它将类更改为 .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>