vue数字翻盘，翻转效果

数字翻转的效果

实现数字翻转的效果上面为出来的样子

下面为代码，使用的时候直接引入，还有就是把图片的路径自己换成自己或者先用颜色替代，传入num和numlength即可

<template><div v-for="(item, index) in processedNums" :key="index" class="filp_box"><divclass="card-container":class="{ entry: flipState[index] }"v-if="item == '.'"><!-- <div class="line"></div> --><div class="card1 card-item">.</div><div class="card2 card-item">.</div><div class="card3 card-item">.</div><div class="card4 card-item">.</div></div><div class="card-container" :class="{ entry: flipState[index] }" v-else><!-- <div class="line"></div> --><div class="card1 card-item">{{ item }}</div><div class="card2 card-item">{{ item }}</div><div class="card3 card-item">{{ item }}</div><div class="card4 card-item">{{ item }}</div></div></div>
</template><script>
export default {props: {nums: {validator: function(value) {// 判断值是否为数字或者可以转换为数字的字符串return !isNaN(value) || typeof value === 'string';},required: true,default: () => 0,},numlength: {type: Number,default: 7,},},watch: {nums(newVal, oldVal) {// 重置所有翻转状态this.flipState = this.processedNums.map(() => false);let newnum = this.processedNumsWatch(newVal);let oldnum = this.processedNumsWatch(oldVal);// 使用$nextTick确保DOM已更新后再触发动画this.cleanTimer= setTimeout(() => {newnum.forEach((item, index) => {if (item != oldnum[index]) {this.flipState[index] = true;}});}, 50);},numlength(newVal, oldVal) {// 重置所有翻转状态this.flipState = this.processedNums.map(() => false);},},data() {return {flipState: [], // 用于记录每个数字容器的翻转状态cleanTimer: null,};},computed: {// 计算属性来处理nums，这里简单地假设处理逻辑是添加一个id字段processedNums() {let string = this.nums.toString();// 字符串转数组let array = Array.from(string);//   数组补0let valueArr = this.padArray(array, this.numlength);return valueArr;},},methods: {// 补0padArray(arr, max) {while (arr.length < max) {arr.unshift("0");}return arr;},processedNumsWatch(val) {let string = val.toString();// 字符串转数组let array = Array.from(string);//   数组补0let valueArr = this.padArray(array, this.numlength);return valueArr;},},beforeDestroy() {clearTimeout(this.cleanTimer);},
};
</script>
<style scoped>
.filp_box {display: inline-block;margin: 0 1px;
}
.card-container {width: 27px;height: 40px;/* background: #000000; */position: relative;
}
.line {position: absolute;z-index: 100;width: 100%;background-color: #fff;height: 3px;top: 49%;
}
.card-item {position: absolute;width: 100%;height: 50%;overflow: hidden;
}.card1 {font-size: 36px;font-family: "myFontNum";font-weight: bold;line-height: 40px;text-align: center;color: #fff;background: url("./TTTT5.png") no-repeat center;
}.card2 {font-size: 36px;font-family: "myFontNum";font-weight: bold;line-height: 0px;color: #fff;text-align: center;top: 50%;background: url("./BBBBBFD.png") no-repeat center;transform-origin: center top;backface-visibility: hidden;transform: rotateX(180deg);z-index: 2;
}.card3 {font-size: 36px;font-family: "myFontNum";font-weight: bold;color: #fff;line-height: 40px;text-align: center;background: url("./TTTT5.png") no-repeat center;transform-origin: center bottom;backface-visibility: hidden;z-index: 2;
}.card4 {font-size: 36px;font-family: "myFontNum";font-weight: bold;color: #fff;top: 50%;line-height: 0px;text-align: center;/* overflow: hidden; */background: url("./BBBBBFD.png") no-repeat center;
}.card-container.entry .card2 {transition: 0.5s;transform: rotateX(0deg);
}.card-container.entry .card3 {transition: 0.5s;transform: rotateX(-180deg);
}
</style>

使用示例

 <FlipCard :nums="propsnum" :numlength="7" />