Element Plus骨架屏怎么自定义动画速度?

Designer°瑞腾 阅读 2

我在用 Element Plus 的 Skeleton 组件,但默认的闪烁动画太快了,看着有点晕。官方文档里好像没找到控制动画速度的属性,试过加 CSS 覆盖也不生效。

比如我写了这段代码:

<el-skeleton :rows="3" animated />

想让动画慢一点,该怎么做?是不是得自己写 CSS 动画覆盖?求具体写法。

我来解答 赞 4 收藏
二维码
手机扫码查看
1 条解答
Prog.书瑜
直接改 CSS 变量就行,Element Plus 留了坑让你填的。

.el-skeleton {
--el-skeleton-duration: 2s; /* 默认是 1.5s,改成你想要的值 */
}


或者如果你想更直接点,覆盖动画本身:

.el-skeleton .el-skeleton__item::after {
animation: skeleton-loading 2s infinite;
}

@keyframes skeleton-loading {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}


第一种方式最简单,改个变量完事儿。代码放这了,自己挑一个用。
点赞
2026-03-13 09:03