vue使用京东的NutUI库的骨架屏，添加高亮滑过动画

原创于 2021-07-01 11:36:40 发布 · 733 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #css

技巧类专栏收录该内容

18 篇文章

订阅专栏

本文介绍了在使用Vue结合NutUI进行移动端开发过程中遇到的问题，特别是关于骨架屏组件的高亮动画缺失。通过自定义CSS样式成功实现了预期的滑动高亮效果。

最近在使用vue+NutUi库在做移动端，说实话，京东这个库真的难用，问题真多了，不过都使用大半了，再换也来不及了。
在使用骨架屏组件时，官方文档上都有滑过的高亮动画了，但使用出来是没有的。
在这里插入图片描述
这就使用处来的，太单调了
只能自己添加了，

.vue-skeleton-row {
    position: relative;

}

.vue-skeleton-row::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0) 3%, rgba(255, 255, 255, 0.2) 5%, rgba(255, 255, 255, 0.2)7%, rgba(255, 255, 255, 0) 10%);
    background-size: 150% 100%;
    animation: shine 0.8s infinite;
    animation-delay: 0s;
    animation-timing-function: linear;
}

@-webkit-keyframes shine {
    0% {
        background-position-x: 150%;
    }

    50% {
        background-position-x: 0%;
    }

    100% {
        background-position-x: -150%;
    }
}