CSS动画的平滑结束

我做了这个加载器棒。当我移除类“animate”时，是否可能等待动画结束

或者只是使条淡出（现在应该淡出，但动画停止）

我想让动画持续运行，并淡出条的颜色，但我不喜欢让动画一直运行

我真的不喜欢它只是消失了：(

$（“#btn”）。单击（函数（）{
$（“.loadBar”）.addClass（“动画”）；
setTimeout（函数（）{
$（“.loadBar”）.removeClass（“动画”）；
}, 5000)
})

#btn{
边缘顶部：50px；
}
.负荷杆{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
高度：2倍；
背景色：透明；
z指数：4；
不透明度：0；
-moz过渡：不透明度在1s内降低；
-o型过渡：不透明度在1s内降低；
-webkit转换：不透明度在1s内降低；
过渡：不透明度在1s内降低；
}
.loadBar.bar{
内容：“；
显示：内联；
位置：绝对位置；
宽度：0；
身高：100%；
左：50%；
文本对齐：居中；
-moz转换：左2s；
-o型过渡：左2s；
-webkit转换：左2s；
过渡：左2s；
}
.loadBar.bar:第n个子项（1）{
背景色：#4183D7；
}
.loadBar.bar:第n个子项（2）{
背景色：#FFF；
}
.loadBar.bar:第n个子项（3）{
背景色：#FFF；
}
.loadBar.animate.bar{
-moz转换：左0s；
-o-过渡：左0s；
-webkit转换：左0秒；
过渡：左0s；
}
.loadBar.animate.bar:第n个子项（1）{
-moz动画：加载1.5s无限；
-o动画：加载1.5s无限；
-webkit动画：加载1.5s无限；
动画：加载1.5s无限；
}
.loadBar.animate.bar:第n个子项（2）{
-moz动画：加载1.5s 0.5s无限；
-o动画：加载1.5s 0.5s无限；
-webkit动画：加载1.5s 0.5s无限；
动画：加载1.5s 0.5s无限；
}
.loadBar.animate.bar:第n个子项（3）{
/*-moz动画：加载3s线性2s无限；
-o动画：加载3s线性2s无限；
-webkit动画：加载3s线性2s无限；
动画：加载3s线性2s无限*/
}
.loadBar.animate{
不透明度：1；
}
@-moz关键帧加载{
从{
左：50%；
宽度：0；
z指数：100；
}
50% {
左：0；
宽度：100%；
z指数：10；
}
到{
左：0；
宽度：100%；
}
}
@-webkit关键帧加载{
从{
左：50%；
宽度：0；
z指数：100；
}
50% {
左：0；
宽度：100%；
z指数：10；
}
到{
左：0；
宽度：100%；
}
}
@关键帧加载{
从{
左：50%；
宽度：0；
z指数：100；
}
50% {
左：0；
宽度：100%；
z指数：10；
}
到{
左：0；
宽度：100%；
}
}

显示加载条当前动画尚未结束

animation: loading 1.5s 0.5s infinite;

让我们通过使其迭代1次来解决这个问题：

animation: loading 1.5s 0s 1;

因为它是一次迭代并且没有延迟，所以整个动画运行时间是1500ms…所以您可以像这样将超时设置为1500ms

编辑：因为您还指定（在这个答案的注释中）希望动画继续，直到加载ajax为止，所以我修改了我的代码


$（“#btn”）。单击（函数（）{
doajax（）；
})
函数doajax（）{
$（“.loadBar”）.addClass（“动画”）；
//每1500毫秒检查一次ajax是否已完成加载
setInterval（函数（）{
if（$（“.loadBar”）.hadClass（“页面加载”））{
$（“.loadBar”）.removeClass（“动画”）；
}
}, 1500);
$.ajax({
url:“http://www.mypage/",
类型：“POST”，
数据：“，
成功：功能（数据）{
$（“.loadBar”）.addClass（“页面加载”）；
}
});
}
#btn{
边缘顶部：50px；
}
.负荷杆{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
高度：2倍；
背景色：透明；
z指数：4；
不透明度：0；
-moz过渡：不透明度在1s内降低；
-o型过渡：不透明度在1s内降低；
-webkit转换：不透明度在1s内降低；
过渡：不透明度在1s内降低；
}
.loadBar.bar{
内容：“；
显示：内联；
位置：绝对位置；
宽度：0；
身高：100%；
左：50%；
文本对齐：居中；
-moz转换：左2s；
-o型过渡：左2s；
-webkit转换：左2s；
过渡：左2s；
}
.loadBar.bar:第n个子项（1）{
背景色：#4183D7；
}
.loadBar.bar:第n个子项（2）{
背景色：#FFF；
}
.loadBar.bar:第n个子项（3）{
背景色：#FFF；
}
.loadBar.animate.bar{
-moz转换：左0s；
-o-过渡：左0s；
-webkit转换：左0秒；
过渡：左0s；
}
.loadBar.animate.bar:第n个子项（1）{
-moz动画：加载1.5s2；
-o动画：加载1.5s 2；
-webkit动画：加载1.5s2；
动画：加载1.5s2；
}
.loadBar.animate.bar:第n个子项（2）{
-moz动画：加载1.5s 0.5s 2；
-o动画：加载1.5s 0.5s 2；
-webkit动画：加载1.5s 0.5s 2；
动画：加载1.5s 0.5s 2；
}
.loadBar.animate.bar:第n个子项（3）{
/*-moz动画：加载3s线性2s无限；
-o动画：加载3s线性2s无限；
-webkit动画：加载3s线性2s无限；
动画：加载3s线性2s无限*/
}
.loadBar.animate{
不透明度：1；
}
@-moz关键帧加载{
从{
左：50%；
宽度：0；
z指数：100；
}
50% {
左：0；
宽度：100%；
z指数：10；
}
到{
左：0；
宽度：100%；
}
}
@-webkit关键帧加载{
从{
左：50%；
宽度：0；
z指数：100；
}
50% {
左：0；
宽度：100%；
z指数：10；
}
到{
左：0；
宽度：100%；
}
}
@关键帧加载{
从{
左：50%；
宽度：0；
z指数：100；
}
50% {
左：0；
宽度：100%；
z指数：10；
}
到{
左：0；
宽度：100%；
}
}

Show loadbar
您可以连续运行动画，并在淡出动画后隐藏元素。动画将完成，这样浏览器将知道它不应被删除