1.animation 判断动画结束，结束后执行另一事件；2.用css3写竖条纹背景

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;
}