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

最近在使用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%;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

这样就有了，这里就不放动画了， 还得录制，不过好用