给element进度条添加动画并监听动画结束事件-webkitAnimationEnd

最新推荐文章于 2024-01-11 23:00:00 发布

生活的小欢呼

最新推荐文章于 2024-01-11 23:00:00 发布

阅读量1.1k

点赞数

分类专栏： element

本文链接：https://blog.csdn.net/XiaoHuanhu/article/details/117709481

版权

Vue.js 进度条 CSS3动画 JavaScript 组件开发

关键词由CSDN通过智能技术生成

element 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图：

<div class="divPlan">
    <div class="divHeader">{{ planProgress.name }}</div>
    <div class="cutLine"></div>
    <div class="divComponent">
      <div
        class="divComponentItem"
        v-for="(item, index) in planProgress.data"
        :key="index"
      >
        <span class="name">{{ item.name }}</span>
        <div class="progress">
          <div class="container">
            <span
              class="process"
              :style="{
                width: (item.value / item.total) * 100 + '%',
                background: item.color,
              }"
            >
              <span class="processNumber" v-if="showProcess">{{
                (item.value / item.total).toFixed(2) * 100 + "%"
              }}</span>
            </span>
          </div>
          <span>{{ item.value }}万元</span>
        </div>
      </div>
    </div>
  </div>

export default {
  name: "workingFace",
  components: {},
  data() {
    return {
      showProcess: false,
      planProgress: {
        name: "年度计划完成情况",
        data: [
          { name: "1号分公司", value: 367, total: 2000, color: "#ff9b00" },
          { name: "2号分公司", value: 763, total: 2000, color: "#ff9b00" },
          { name: "3号分公司", value: 260, total: 2000, color: "#00ccff" },
          { name: "4号分公司", value: 969, total: 2000, color: "#00ccff" },
        ],
      },
    };
  },
  mounted() {
    const end = document.querySelector(".process"),
      that = this;
    // 当css3的animation完成一个动画，我们想让动画保持在终止的状态或其他一些事件，就可以监听 webkitAnimationEnd 事件
    // 开始事件: webkitAnimationStart
    // 结束事件:  webkitAnimationEnd
    // 重复运动事件: webkitAnimationIteration
    end.addEventListener("webkitAnimationEnd", function () {
      that.showProcess = true;
    });
  },
};

.divPlan {
  border-radius: 16px;
  height: 32%;
  width: 100%;
  background: rgb(236, 235, 235);
}
.divHeader {
  font-size: 15px;
  padding: 10px 15px;
  font-weight: bold;
}
.cutLine {
  width: 100%;
  height: 5px;
  background-image: linear-gradient(to right, #0a3e55, #8f9192);
}
.divComponent {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 99%;
  height: calc(100% - 50px);
  padding: 10px 15px 5px 15px;
}
.divComponentItem {
  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: 75%;
  height: 30%;
  background: #afbbc5;
}
.process {
  display: block;
  height: 100%;
  position: relative;
  animation: move 5s linear 0s 1;
}
@keyframes move {
  0% {
    width: 0px;
  }
  100% {
    width: " (item.value / item.total) * 100 + '%'";
  }
}
.processNumber {
  position: absolute;
  right: -40px;
  top: -7px;
}
.process::after {
  content: "";
  width: 2px;
  height: 200%;
  background: inherit;
  position: absolute;
  top: -40%;
  right: -1px;
}