最近在使用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%;
}
}
这样就有了,这里就不放动画了, 还得录制,不过好用