站長(zhǎng)資訊網(wǎng)
項(xiàng)目過程中，開始使用了js的requestAnimationFrame方法實(shí)現(xiàn)進(jìn)度條，但是在數(shù)據(jù)超級(jí)多的時(shí)候非常影響性能，如此改用css去實(shí)現(xiàn)，優(yōu)化。
先貼代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> *{margin: 0;padding: 0} .box{width: 100px;height: 10px;border-radius: 10px;background: #999;margin: 100px auto;border: 1px solid #ff6780;} .child{position: relative;height:100%;border-radius:inherit;} .process-animate{background: #ff6780;position: absolute;left: 0;top: 0;bottom: 0;border-radius:inherit; animation: process 1s linear forwards ; } @keyframes process { 0%{ left:0;right:100%; } 20%{ right:80% } 40%{ right:60%; } 60%{right:40%;} 80%{right:20%;} 100%{right:0;} } </style> </head> <body> <p class="box"> <p class="child" style="width:50%"> // child的百分比就是進(jìn)度條的占比效果 <p class="process-animate"></p> </p> </p> </body> </html>
效果圖（復(fù)制代碼可查看動(dòng)態(tài)效果）：
正常情況下，百分比肯定是根據(jù)后臺(tái)數(shù)據(jù)進(jìn)行計(jì)算得出的，所以是動(dòng)態(tài)傳入的，下面貼vue代碼
進(jìn)度條子組件（progress.vue）：
<template> <p class="process-wrapper" :class="{'addGray':addGray}"> <p class="process-child" ref="processChild"> <p class="process-animate" :class="{'addGray':addGray}"></p> </p> </p> </template> <script> export default { props: { addGray: { //置灰 type: Boolean, default: false }, progressWidth: { //進(jìn)度條百分比 type: Number, default: 0 } }, mounted() { this.$nextTick(() => { console.log(this.addGray, "addGray---"); this.$refs.processChild.style.width = this.progressWidth + "%"; //動(dòng)態(tài)改變進(jìn)度條 // this.$refs.processChild.style.width = 90 + "%"; 測(cè)試效果 }); } }; </script> <style lang="scss" scoped> .process-wrapper { width: 1.98rem; height: 0.13rem; margin: 0.12rem 0 0.1rem 0; border-radius: 0.1rem; background: #fff; border: 0.01rem solid #ff6780; &.addGray { background: #999; border: 0.01rem solid #999; } .process-child { position: relative; height: 100%; // width: 100%; //這個(gè)width就是動(dòng)態(tài)變化。通過js改變 border-radius: inherit; .process-animate { background: #ff6780; position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; animation: process 1s linear forwards; &.addGray { background: #999 !important; // border: 0.01rem solid #999; } } } } @keyframes process { 0% { left: 0; right: 100%; } 20% { right: 80%; } 40% { right: 60%; } 60% { right: 40%; } 80% { right: 20%; } 100% { right: 0; } } </style>
父組件調(diào)用：
<!-- 進(jìn)度條 --> <Progress :addGray="inactive" :progressWidth="progressWidth"></Progress>
看看實(shí)際效果：
推薦教程：《CSS教程》
