1.用css3的animation完成一个动画，并监听动画结束后才执行另一个事的实现方法：
动画结束时有一个webkitAnimationEnd事件，只要监听这个事件就可以
2.用css3写带透明色的竖条纹背景：
background-image:linear-gradient(90deg,#00a7ed50%,transparent50%); //让背景的渐变带有90度的倾斜，也就是变成竖条纹
background-size:4px100%; //每一部分都有自己的宽度和高度
效果图：
<div class="workingPlan"><div class="divHeader">{{ workingPlan.name }}</div><div class="cutLine"></div><div class="divComponent"><divclass="workingPlanItem"v-for="(item, index) in workingPlan.data":key="index"><span class="name">{{ item.name }}</span><div class="progress"><div class="container"><spanclass="process":style="{ width: getProgress(item).progress }"></span></div><span v-if="showProgress">{{ getProgress(item).progress }}</span></div></div></div></div>
export default {name: "workingPlan",components: {},methods: {getProgress(data) {return {progress: (data.value / data.total).toFixed(2) * 100 + "%",};},},mounted() {const end = document.querySelector(".process"),that = this;end.addEventListener("webkitAnimationEnd", function () {that.showProgress = true;});},data() {return {showProgress: false,workingPlan: {name: "工作计划",data: [{name: "工作计划1",value: 4,total: 20,},{name: "工作计划2",value: 10,total: 20,},],},};},};
.workingPlan {border-radius: 16px;height: 25%;width: 100%;background-color: rgb(249, 253, 255);}.divHeader {font-size: 17px;padding: 10px;font-weight: bold;text-align: center;}.cutLine {width: 100%;height: 5px;background-image: linear-gradient(to right, #3633d8, #44bbf7);}.divComponent {display: flex;flex-direction: column;justify-content: space-around;width: 99%;height: calc(100% - 50px);padding: 10px 15px 5px 15px;/*border: 1px solid red;*/}.workingPlanItem {display: flex;flex-direction: column;justify-content: space-around;width: 100%;height: 25%;text-align: left;}.name {font-size: 15px;}.progress {height: 45%;width: 100%;display: flex;justify-content: space-between;align-items: center;}.container {width: 80%;height: 30%;background: #dbdfe2;}.process {display: block;height: 100%;position: relative;background-image: linear-gradient(90deg, #3633d8 50%, transparent 50%);background-size: 4px 100%;animation: change 5s linear 0s 1;}@keyframes change {0% {width: 0px;}100% {width: "getProgress(item).progress";}}.process::after {content: "";width: 2px;height: 200%;background: #3633d8;position: absolute;top: -40%;right: -1px;}
