翻页器、记分牌效果

一、效果展示

类似于计分牌，有滚动的效果

二、代码块

在vue中封装成一个组件
在需要的页面上引入 穿入number即可 ↓

<template>
    <div class="border">
        <span class="number">
            <transition-group>
                <i v-for="(num,index) in numbers" :key="index+'num'" :style="[setPosition(num), setTransition()]"></i>
            </transition-group>
        </span>
    </div>
</template>

<script>
export default {
  name: 'DigitalScroll',
  props: {
    number: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      showNumber: '',
      numbers: []
    }
  },
  watch: {
    number (number) {
      this.showNumber = this.number + ''
      this.numbers = []
      for (var i = 0; i < this.showNumber.length; i++) {
        this.numbers.push(parseInt(this.showNumber.charAt(i)))
      }
    }
  },
  created () {
    this.showNumber = this.number + ''
    this.numbers = []
    for (var i = 0; i < this.showNumber.length; i++) {
      this.numbers.push(parseInt(this.showNumber.charAt(i)))
    }
  },
  computed: {
    setPosition () {
      return function (value) {
        return {backgroundPosition: '0 ' + value * -58 + 'px'}
      }
    },
    setTransition () {
      return function () {
        return {transition: 'background-position 1.5s ease 0s'}
      }
    }
  }
}
</script>

<style scoped>
.border{
    width: 100%;
    margin: 0 auto;
}
.border .number i{
    width: 45px;
    height: 47px;
    display: inline-block;
    /* animation: bounce-in .5s; */
    background: url(../../assets/number.png) no-repeat;
    background-position: 0 0;
}
.v-enter-active, .v-leave-active{
    transition: background-position 2s ease 2s;
}
</style>