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

Designer°瑞腾提问于 2026-03-13 08:38:18 阅读 77

组件

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

比如我写了这段代码：

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

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

我来解答赞 10 收藏

反馈

2 条解答

闲人钰岩 Lv1

确实 Element Plus 的 Skeleton 组件默认动画速度是固定的，文档里也没直接提供修改动画速度的属性。不过通过自定义 CSS 是可以解决这个问题的。

推荐的做法是覆盖默认的动画类名。Element Plus 骨架屏用的是一个叫 .el-skeleton__animate 的类来控制动画效果。我们可以通过更高优先级的选择器来覆盖它。

你需要这样写 CSS：

.el-skeleton {

  --skeleton-animation-duration: 2s; /* 自定义动画时间 */

}



.el-skeleton__animate {

  animation-duration: var(--skeleton-animation-duration);

}

注意要确保你的 CSS 文件在 Element Plus 样式之后加载，或者使用更高优先级的选择器比如加上父级限定。有时候可能需要加上 !important 来强制覆盖，但这个就看具体项目的样式层级了。

说真的，CSS 覆盖这种操作虽然有点麻烦，但比起自己重写整个组件还是简单多了。要是觉得麻烦，也可以考虑封装成 mixin 或者单独的样式文件统一管理。

2026-03-27 16:01

Prog.书瑜 Lv1

直接改 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