改elementUI上的进度条为动画效果

改elementUI上的进度条为动画效果

<el-progress
     class="layui-progress-bar"
     :text-inside="true"
     :stroke-width="18"
     :percentage="item.use"
     :color="item.customColor"
   ></el-progress>

第一种 改变background 背景

<style>
.layui-progress-bar .el-progress-bar__inner:before {
    content:"";
    width:100%;
    height:100%;
    display:block;
    animation:move 1s linear infinite;
  }
@keyframes move {
    to {
        background:repeating-linear-gradient(-45deg,rgba(255,255,255,0.3) 0,rgba(255,255,255,0.3) 12.5%,transparent 0,transparent 25%) 0/60px 60px;
    }
    from {
        background:repeating-linear-gradient(-45deg,rgba(255,255,255,0.3) 12.5%,rgba(255,255,255,0.3) 25%,transparent 0%,transparent 37.5%) 0/60px 60px;
    }
} 
</style>

这一种直接修改background的背景，有点卡顿，猜想应该是每次渲染background的渐变样式会影响性能,也就是浏览器渲染这个背景时会比较浪费时间，所以会有卡顿想象

第二种 改变background的位置

<style>
.layui-progress-bar .el-progress-bar__inner:before {
    content:"";
    width:100%;
    height:100%;
    display:block;
    background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,0.3) 0,rgba(255,255,255,0.3) 12.5%,transparent 0,transparent 25%);
    background-size:80px 80px;
    animation:move 2.5s linear infinite;
  }

@keyframes move {
  from {
    background-position: 80px 0;
  }
  to {
    background-position:  0;
  }
}
</style>

这个非常流畅，因为只改变了一下背景图的位置，不怎么影响性能，以后需要animate做动画时，最好不要直接改变某个比较耗性能的属性，要想更流畅，尽量使用transform，opacity这些属性,其他的最好不要改变