vue实现卡牌数字动态翻牌效果

1. 实现效果

在大屏项目中，我们尝尝会遇到卡牌式数字显示且能动态翻牌的效果，效果图如下：

2. 实现代码

<template>
	<div class="days-box">
		<div class="operating-title">安全运行天数</div>
		<div class="box-item">
		  <li
		    :class="{
		      'number-item': !isNaN(item),
		      'mark-item': isNaN(item),
		    }"
		    v-for="(item, index) in runningDays"
		    :key="index"
		  >
		    <span v-if="!isNaN(item)">
		      <i ref="numberItem">0123456789</i>
		    </span>
		    <span class="comma" v-else>{{ item }}</span>
		  </li>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
		   return {
		      runningDays: ['0', '0', '0', '0', '0', '0', '0', '0'], 
		   }
  		},
  		mounted () {
		    // 获取当前日期
		    var today = new Date()
		    // 设置起始日期
		    var startDate = new Date("2023-04-24")
		    // 计算天数差
		    var timeDiff = Math.abs(today.getTime() - startDate.getTime())
		    var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24))
		    this.$nextTick(() => {
		      this.toRunningNum(diffDays) // 这里输入数字即可调用
		      this.setNumberTransform()
		    })
	    },
	    methods: {
			// 设置文字滚动
		    setNumberTransform () {
		      const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
		      const numberArr = this.runningDays.filter(item => !isNaN(item))
		      // 结合CSS 对数字字符进行滚动,显示订单数量
		      for (let index = 0; index < numberItems.length; index++) {
		        const elem = numberItems[index]
		        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
		      }
		    },
		    // 处理数字
		    toRunningNum (num) {
		      num = num.toString()
		      this.runningDays= num.split('') // 将其便变成数据，渲染至滚动数组
		    },
		}
	}
</script>
<style lang="scss" scoped>
/*滚动数字设置*/
.operating-title {
  color: #b5c5d4;
  font-size: 16px;
  margin-bottom: 10px;
}
.box-item {
  position: relative;
  height: 80px;
  font-size: 54px;
  line-height: 41px;
  text-align: center;
  list-style: none;
  // color: #2d7cff;
  color: #fff;
  writing-mode: vertical-lr;
  text-orientation: upright;
  /*文字禁止编辑*/
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
  /* overflow: hidden; */
}

/* 默认逗号设置 */
.mark-item {
  width: 10px;
  height: 100px;
  margin-right: 5px;
  line-height: 10px;
  font-size: 48px;
  position: relative;
  & > span {
    position: absolute;
    width: 100%;
    bottom: 0;
    writing-mode: vertical-rl;
    text-orientation: upright;
  }
}

/*滚动数字设置*/
.number-item {
  width: 41px;
  height: 75px;
  background: #ccc;
  list-style: none;
  margin-right: 5px;
  background: rgb(7, 50, 207);
  border-radius: 4px;
  border: 1px solid rgba(7, 50, 207, 1);
  & > span {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    width: 100%;
    height: 100%;
    writing-mode: vertical-rl;
    text-orientation: upright;
    overflow: hidden;
    & > i {
      font-style: normal;
      position: absolute;
      top: 11px;
      left: 50%;
      transform: translate(-50%, 0);
      transition: transform 1s ease-in-out;
      letter-spacing: 10px;
    }
  }
}
</style>