以下代码将淡入淡出一个元素。当淡出时,通过使其大小为零来“删除”该元素。
第一次将类名show-loading添加到具有loading类的现有元素时,以下代码起作用。同样,当我同时添加类名hide-loading并删除类show-loading时,它也正常工作。
但是,第二次及之后每次设置类时,此动画都不会呈现。相反,它直接跳转到动画的最后一帧,根据是否指定show或hide而使其可见或不可见。因此,最终结果是正确的,但动画部分不正确。
我如何使动画在设置类时每次都参与,而无需显然地删除元素并添加新元素以重置保存的任何状态...?
html
第一次将类名show-loading添加到具有loading类的现有元素时,以下代码起作用。同样,当我同时添加类名hide-loading并删除类show-loading时,它也正常工作。
但是,第二次及之后每次设置类时,此动画都不会呈现。相反,它直接跳转到动画的最后一帧,根据是否指定show或hide而使其可见或不可见。因此,最终结果是正确的,但动画部分不正确。
我如何使动画在设置类时每次都参与,而无需显然地删除元素并添加新元素以重置保存的任何状态...?
html
<div class="loading"></div>
css
.loading
{
overflow: hidden;
position: fixed;
background: #fff;
z-index: 9999;
user-select: none;
}
.loading.show-loading
{
animation: loading-fade .4s 1 linear both;
}
.loading.hide-loading
{
animation: loading-fade .4s 1 linear both;
animation-direction: reverse;
}
@keyframes loading-fade
{
0%
{
opacity: 0;
top: auto;
right: auto;
bottom: auto;
left: auto;
}
1%
{
top: 0;
right: 0;
bottom: 0;
left: 0;
}
100%
{
opacity: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}