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

从display: none;删除errorTooltipUnload

.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>

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

1 个答案: