本文共 1273 字，大约阅读时间需要 4 分钟。

css3电池效果，页面加载，从左到右增长到传入的值。

效果：

分析：

黑色的小间隔是自己画的，保证页面伸缩的时候样式不会异样，间隔是循环定位上去的，让间隔的层级最高，然后彩色的小块是循环产生的，宽度固定，撑满整个盒子，一共10个，然后，右边有一个灰色盒子，用100%-要显示的值，就是他的长度，把他定位到右边，最初给他100%，然后在生命周期中500毫秒让他缩到（100%-要显示的值）这个宽度，就可以看到动画增长的效果了；这里直接transition过度也可以实现效果了

代码：

   data(){   	return{   		//色块		colorList:[		   {   id:'a',color: "#299AF0"},		   {   id:'b',color: "#309EE6"},		   {   id:'c',color: "#29A4BF"},		   {   id:'d',color: "#36D5E8"},		   {   id:'e',color: "#50D2E2"},		   {   id:'f',color: "#41D8D8"},		   {   id:'g',color: "#3BDBEE"},		   {   id:'h',color: "#3BDBEE"},		   {   id:'i',color: "#3BDBEE"},		   {   id:'j',color: "#3BDBEE"},		  ]	}},computed:{   	//值	_value:{       get(){         if(this.value>100){           this.value = 100      }else if(this.value<0||this.value===0){           this.value = 0      }else{           return parseInt(parseInt(this.value))      }    }  },  //间隔个数  lengthes:{       get(){         let arr = []      for(var i =0;i<11;i++){           arr.push(i)      }      return arr    }  }}

转载地址：http://iigwz.baihongyu.com/