gpt4 book ai didi

css 动画只在第一次工作

转载 作者:行者123 更新时间:2023-12-05 01:45:52 26 4
gpt4 key购买 nike

以下代码将淡入淡出元素。当淡出时,它将通过使元素没有大小来“删除”该元素。

当我第一次将类名 show-loading 添加到具有类 loading 的现有元素时,以下代码可以正常工作。此外,当我删除类 show-loading 时,同时添加类名 hide-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;
}
}

最佳答案

其中一个技巧是两次使用相同的动画但名称不同。

查看 THIS fiddle 。

这是一个已知但意外的行为,您可以通过“删除”当前动画,然后应用另一个动画(即使它具有相同的结构)来获得所需的效果 - 这就是我使用两个 @keyframe 动画的原因。

.loading.show-loading {
animation: loading-fade 1s 1 linear both;
}

.loading.hide-loading {
animation: loading-fade-backwards 1s 1 linear both;
animation-direction: reverse;
}

关于css 动画只在第一次工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39790438/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com