Vue 滚动计数器

第一章 概述

用 Vue 制作的一个有数字滚动效果的计数器，在数字加减的时候会向上或向下滚动。

使用 codepen 编写。

第二章 效果图

第三章 源代码

0x01.html代码

<!-- 引入的外部 CSS/JS 样式 -->

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css'>

<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js'></script>

<div id="app">
  <button @click="subtract" :disabled="isAnimating">
    <i class="fas fa-minus"></i>
  </button>
  <span :class="{before: isBefore, after: isAfter}" :data-before="countBefore" :data-after="countAfter">{{ count }}</span>
  <button @click="add" :disabled="isAnimating">
    <i class="fas fa-plus"></i>
  </button>
</div>

0x02.CSS样式代码

:root {
  font-size: 100px;
  font-family: Helvetica;
}

body {
  display: flex;
  justify-content: center;
  algin-items: center;
  min-height: 100vh;
}

#app {
  display: flex;
  position: relative;
  width: 5rem;
  height: 1rem;
  background-color: #000;
  border-radius: .2rem;
  overflow: hidden;
  padding: .3rem 0;
  box-shadow: 0px 3px 12px rgba(0,0,0,.2);
}

#app::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.9) 100%);
}

span {
  display: block;
  flex: 1 1 5rem;
  font-size: 1rem;
  line-height: 1rem;
  color: #fff;
  text-align: center;
  
  transform: translateY(-1rem);
}

span.before {
  transform: translateY(0rem);
  transition: transform .2s ease-in;
}

span.after {
  transform: translateY(-2rem);
  transition: transform .2s ease-in;
}

span::before {
  display: block;
  content: attr(data-before);
}

span::after {
  display: block;
  content: attr(data-after);
}

button {
  flex:  0 0 1.2rem;
  position: relative;
  width: 1rem;
  height: 1rem;
  border: 0;
  background: none;
  color: #fff;
  font-size: .6rem;
  line-height: 1rem;
  padding: 0;
  margin: 0;
  z-index: 100;
  outline:none;
}

0x03.JS代码

new Vue({
  el: '#app',
  data: {
    count: 10,
    countBefore: 9,
    countAfter: 11,
    isBefore: false,
    isAfter: false,
   },
   computed: {
     isAnimating(){
       return this.isBefore || this.isAfter
     }
   },
   methods: {
    subtract(){
       this.isBefore = true
      
      setTimeout(() => {
        this.count--
        this.countBefore = this.count - 1
        this.countAfter = this.count + 1
        this.isBefore = false
      },200)
     },
    add(){
       this.isAfter = true
      
      setTimeout(() => {
        this.count++
        this.countBefore = this.count - 1
        this.countAfter = this.count + 1
        this.isAfter = false
      },200)
    }
  }
})

##参考 B站视频BV1tV41167Yr UP @CodingStartup起码课

赏

谢谢你请我吃糖果

支付宝

微信