CSS3与Vue.js实现计数器效果-优快云博客

本文链接：https://blog.youkuaiyun.com/printf_hello/article/details/106991690

本文介绍如何使用CSS3伪元素和Vue.js框架创建一个具有平滑过渡效果的数字计数器，通过按钮点击触发加减操作，并采用函数节流技术防止频繁操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

数字上下两侧的使用伪元素，通过在标签上设置attribute属性,css3提供attr(attributeName)来获取attribute的值；加减两个事件做一个简单的函数节流

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style lang="less" type="text/less">
    *{
      padding: 0;
      margin: 0;
    }
    html,body{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 16px;
    }
    .center{
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
    }
    #app{
      .center();
      min-height: 100vh;

      .container{
        width: 4em;
        background: linear-gradient(180deg,rgba(0,0,0,0.7), #000,rgba(0,0,0,0.65));
        height: 1em;
        overflow: hidden;
        border-radius: 2px;
        transform: scale(3);
        position: relative;
        box-shadow: 0 0 1px rgb(0,0,0);
        padding: .7em 0;
        .center();

        span{
          flex: 2;
          color: #fff;
          cursor: default;
          text-align: center;
          font-weight: bold;
          font-size: 0.9em;
          &::before {
            display: block;
            content: attr(before-data);
            line-height: 1em;
            font-size: 0.9em;
            height: 1em;
          }
          &::after {
            line-height: 1em;
            height: 1em;
            width: 100%;
            height: 100%;
            font-size: 0.9em;
            display: block;
            content: attr(after-data);
          }
        }
        .add{
          transition: .2s all ease;
          transform: translateY(-1em);
        }
        .subtract{
          transition: .2s all ease;
          transform: translateY(1em);
        }
        button{
          flex: 1;
          height: 1em;
          width: 1em;
          font-size: 1em;
          outline: none;
          border: none;
          background-color: transparent;
          color: #fff;
          cursor: pointer;
          line-height: 1em;
        }
      }
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="container">
      <button @click="subtract">-</button>
      <span @transitionend="transitionend" :class="{ add:isAdd, subtract:isSubtract }" :before-data="afterCount"
        :after-data="beforeCount">{{ count }}</span>
      <button @click="add">+</button>
    </div>
  </div>
  <script>
    let app = new Vue({
      el: '#app',
      data() {
        return {
          count: 0,
          isAdd: false,
          isSubtract: false,
          current: 0
        }
      },
      computed: {
        afterCount() {
          return this.count - 1
        },
        beforeCount() {
          return this.count + 1
        }
      },
      methods: {
        transitionend(){
          if (this.isAdd) {
            this.count += 1 
            this.isAdd = false;
          }else {
            this.count -= 1 
            this.isSubtract = false;
          }
        },
        subtract() {
          if (+new Date() - this.current < 500) return;
          this.isSubtract = true;
          this.current = +new Date()
        },
        add() {
          if (+new Date() - this.current < 500) return;
          this.isAdd = true;
          this.current = +new Date()
        }
      },
    })
  </script>
  <script src="https://cdn.bootcdn.net/ajax/libs/less.js/3.11.3/less.js"></script>
</body>

</html>

滚动计数器