1.用css3的animation完成一个动画,并监听动画结束后才执行另一个事的实现方法:
动画结束时有一个webkitAnimationEnd事件,只要监听这个事件就可以
2.用css3写带透明色的竖条纹背景:
background-image: linear-gradient(90deg, #00a7ed 50%,transparent 50%); //让背景的渐变带有90度的倾斜,也就是变成竖条纹
background-size: 4px 100%; //每一部分都有自己的宽度和高度
效果图:
<div class="workingPlan">
<div class="divHeader">{{ workingPlan.name }}</div>
<div class="cutLine"></div>
<div class="divComponent">
<div
class="workingPlanItem"
v-for="(item, index) in workingPlan.data"
:key="index"
>
<span class="name">{{ item.name }}</span>
<div class="progress">
<div class="container">
<span
class="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;
}